使用window.print()实现网页打印
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style type=”text/css” media=”print”> 9 #button { 10 display: none; 11 } 12 </style> 13 </head> 14 15 <body> 16 <button id=”button” onclick="qrprint()">打印</button> 17 <table id=”tab_1” style="page-break-after: always;"> 18 <tr> 19 <td><span>这是内容1</span></td> 20 <td><span>这是内容2</span></td> 21 <td><span>这是内容3</span></td> 22 </tr> 23 <tr> 24 <td><span>这是内容4</span></td> 25 <td><span>这是内容5</span></td> 26 <td><span>这是内容6</span></td> 27 </tr> 28 </table> 29 <table id=”tab_2” style="page-break-after: always;"> 30 <tr> 31 <td><span>这是内容7</span></td> 32 <td><span>这是内容8</span></td> 33 <td><span>这是内容9</span></td> 34 </tr> 35 </tr> 36 <td><span>这是内容10</span></td> 37 <td><span>这是内容11</span></td> 38 <td><span>这是内容12</span></td> 39 </tr> 40 </table> 41 <script> 42 function qrprint() { 43 window.print();//打开当前页面 44 window.close();//关闭当前页面 45 } 46 </script> 47 </body> 48 </html>
注:style设置为page-break-after:always可以实现分页,可参考w3chool或者菜鸟等其它进行了解