vue使用PrintJS插件打印

2021-05-27 10:33:27 阅读：1394 来源： 互联网

标签：插件 PrintJS vue 打印 js json html print id

第一步，先安装 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，使其不打印。非常好用

标签：插件,PrintJS,vue,打印,js,json,html,print,id
来源： https://blog.csdn.net/qq826303461/article/details/117321979

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue使用PrintJS插件打印