使用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或者菜鸟等其它进行了解

参考链接：https://www.cnblogs.com/qiankun-site/p/5814038.html

使用window.print()实现网页打印

猜你喜欢