快遞單列印自動分頁實現（簡單）

以下為 中國郵政 電子商務小包詳細單 列印 HTML模板

HTML代碼：

<div style="width: 815px; height: 400px; background-image: url('http://www.cnblogs.com/ideal35500/admin/PrintPackage_bg.jpg'); position: static; page-break-after: always; font-size: 18px; font-weight: bold;"> <!-- 收件者郵編 --><div style="width: 200px; height: 20px; top: 130px; left: 80px; position: relative; z-index: 100; letter-spacing: 18px;">100165</div><!-- 收件者姓名 連絡方式 詳細地址--><div style="width: 300px; height: 100px; top: 140px; left: 80px; position: relative; z-index: 100;"> 張三           18611857008<br /><br />廣東 河源 和平 XXX(單位地址)</div>  <!-- 寄件人姓名 連絡方式 詳細地址--><div style="width: 300px; height: 100px; top: 150px; left: 80px; position: relative; z-index: 100;">  XXX公司          <br />  <br />北京市丰台區XXX</div>  <!-- 寄件人郵編 --><div style="width: 200px; height: 20px; top: 150px; left: 300px; position: relative; z-index: 100;">100165</div>    <!-- 商品清單 --><div style="width: 200px; height: 100px; top: -80px; left: 420px; position: relative; z-index: 100;">此包裹已驗視<br />圖書10000000<br />不保價</div>  <!-- 備忘 --><div style="width: 200px; height: 50px; top: -40px; left: 420px; position: relative; z-index: 100;">退回寄件人：李四（010-00000000）</div>  </div><div style="width: 815px; height: 400px; background-image: url('http://www.cnblogs.com/ideal35500/admin/PrintPackage_bg.jpg'); position: static; page-break-after: always; font-size: 18px; font-weight: bold;">  <!-- 收件者郵編 --><div style="width: 200px; height: 20px; top: 130px; left: 80px; position: relative; z-index: 100; letter-spacing: 18px;">100165</div>  <!-- 收件者姓名 連絡方式 詳細地址--><div style="width: 300px; height: 100px; top: 140px; left: 80px; position: relative; z-index: 100;">  張三           18611857008<br /><br />廣東 河源 和平 XXX(單位地址)</div>  <!-- 寄件人姓名 連絡方式 詳細地址--><div style="width: 300px; height: 100px; top: 150px; left: 80px; position: relative; z-index: 100;">  XXX公司          <br />  <br />北京市丰台區XXX</div>  <!-- 寄件人郵編 --><div style="width: 200px; height: 20px; top: 150px; left: 300px; position: relative; z-index: 100;">100165</div>    <!-- 商品清單 --><div style="width: 200px; height: 100px; top: -80px; left: 420px; position: relative; z-index: 100;">此包裹已驗視<br />圖書10000000<br />不保價</div>  <!-- 備忘 --><div style="width: 200px; height: 50px; top: -40px; left: 420px; position: relative; z-index: 100;">退回寄件人：李四（010-00000000）</div>  </div>

 

效果：

100165

張三           18611857008

廣東 河源 和平 XXX(單位地址)

XXX公司          

北京市丰台區XXX

100165

此包裹已驗視
圖書10000000
不保價

退回寄件人：李四（010-00000000）

100165

張三           18611857008

廣東 河源 和平 XXX(單位地址)

XXX公司          

北京市丰台區XXX

100165

此包裹已驗視
圖書10000000
不保價

退回寄件人：李四（010-00000000）

預覽列印：

在每一模板加是樣式：”page-break-after: always;“即可