使用print.js进行分页打印

如何进行表格大量数据的分页打印

print.js官网
目的：实现大量数据的分页打印
探究过程：几种流行的打印插件，
vue-print-nb
vue-easy-print
都没有实现自动分页打印功能(网上讲解混乱，有的说可以自动分页，有的说不能，导致在这两个插件上耗费很长时间也没实现功能)

最后选取了print-js，

操作过程

使用 npm 安装：

 npm install print-js --save
1

html

<div id="print-box" 
 	style={{ 
	 	fontSize: ''30px'',
	    textAlign: ''center'',
	    lineHeight: ''60px'',
}}>title</div>
<button @click="toPrint"></button>

/**下面这个js，直接放在方法里即可**/
...
methods: {
    /**
     * 打印
     */
    toPrint(){
      printJS({
        printable: ''paper'', //如果下面的type是json，则这里放表格数据，如果下面type是html，则这里放置div的id
        properties:[{
        field:"name",
        displayName:"名字",
      }],//字段的
        type: ''html'',
        targetStyles: [''*''], //重点  继承原来的样式，没有这个样式就是乱的
        documentTitle:"EFFORT", 
        repeatTableHeader:true,  //重复表头

      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28