项目开发中遇到的：打印一组数据，在同一个页面
如图效果：
实现方式：
<style> .body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; box-sizing: border-box; -moz-box-sizing: border-box; } .page { 21cm; min-height: 29.7cm; padding: 0.5cm; margin: 1cm auto; border: 0px #D3D3D3 solid; border-radius: 5px; background: white; /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/ /*边框*/ } .webpage { page-break-after: always; } .code_main_body { 92%; padding-left: 4%; padding-right: 4%; padding-top: 18px; white-space: normal; } .CodeImg { 100%; } .Image { 100%; } .Image img { 80%; padding-left: 10%; padding-right: 10%; height: 150px; } .info_item { 60%; padding-left: 20%; padding-right: 20%; padding-left: 30%; } .info_item label { height: 40px; line-height: 40px; font-size: 20px; } .logo { 100%; padding-top: 20px; } .logo img { 60%; padding-left: 20%; padding-right: 20%; } </style> <body> <div class="book"> <div class="page"> <div class="webpage"> <div class="code_main_body"> <div class="CodeImg"> <div class="Image"> <img name="PrintCoverUrl" src="./封面打印_files/ShowImage"> </div> <div> <div class="info_item"> <label>xxx：1902121704250001</label> <label name="ClaimCode"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="CompanyClaimCode"></label> </div> </div> <div class="logo"> <img src="./封面打印_files/a.png"> </div> <div> <div class="info_item"> <label>xxx：</label> <label name="InsuredCompany">测试名称001</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuranceCustomer">xxxxssss</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuredName"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="InvoiceCount"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="ScanInvoiceCount"></label> </div> </div> </div> </div> </div> </div> <div class="page"> <div class="webpage"> <div class="code_main_body"> <div class="CodeImg"> <div class="Image"> <img name="PrintCoverUrl" src="./封面打印_files/ShowImage(1)"> </div> <div> <div class="info_item"> <label>xxx：1902121704250002</label> <label name="ClaimCode"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="CompanyClaimCode"></label> </div> </div> <div class="logo"> <img src="./封面打印_files/a.png"> </div> <div> <div class="info_item"> <label>xxx：</label> <label name="InsuredCompany">测试名称001</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuranceCustomer">xxxxsssds</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuredName"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="InvoiceCount"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="ScanInvoiceCount"></label> </div> </div> </div> </div> </div> </div> <div class="page"> <div class="webpage"> <div class="code_main_body"> <div class="CodeImg"> <div class="Image"> <img name="PrintCoverUrl" src="./封面打印_files/ShowImage(2)"> </div> <div> <div class="info_item"> <label>xxx：1902121704250003</label> <label name="ClaimCode"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="CompanyClaimCode"></label> </div> </div> <div class="logo"> <img src="./封面打印_files/a.png"> </div> <div> <div class="info_item"> <label>xxx：</label> <label name="InsuredCompany">测试名称001</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuranceCustomer">xsxsxxxs</label> </div> <div class="info_item"> <label>xxx：</label> <label name="InsuredName"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="InvoiceCount"></label> </div> <div class="info_item"> <label>xxx：</label> <label name="ScanInvoiceCount"></label> </div> </div> </div> </div> </div> </div> </div> </body>
window.print();//js代码调用打印 或者 Ctrl+P 调用