vue使用PrintJS插件打印_vue中使用print-js进行表格打印,并在分页时只在最后一页显示表尾

第一步，先安装 print-js 插件

npm install print-js --save

第二步，在想要打印的Vue页面引入组件

import print from 'print-js';

第三步，在想要局部打印的 div 上 添加 id

<div id="codeList"> 
    <!-- page-break-after 属性 是分页 -->
    <div v-for="i in 10" style="page-break-after: always; height: 100%">
        <div>测试{{i}}</div> 
    </div>
</div> 
<button @click="goPrint">打印预览</button>
 

方法如下，具体参数没有取了解，有需要的可以前往官方地址：https://printjs.crabbly.com/

methods: {
    goPrint(){ 
        printJS({ 
            printable: 'codeList', 
            type: 'html', 
            targetStyles: ['*'], 
            ignoreElements:['no-print','bc','gb'] 
        })
    }
}
 

printable:要打印的id。

type:可以是 html 、pdf、 json 等。

properties:是打印json时所需要的数据属性。

gridHeaderStyle和gridStyle都是打印json时可选的样式。

repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。

scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。

targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。

style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。

ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用