Print.js 官网
官网
优点：可以打印多种格式的内容(pdf、json、html等)
打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便。
一、vue安装命令：
npm install print-js –save
二、引入
这个引入不需要在main.js中，直接在使用的.vue中引入即可
这里颜色虽然是灰色，但是也要添加，否则会报错。
三、编码
我这里要打印 html 中的div ，调用函数找到 div 的 id。
methods: {
goPrint(){
console.log(‘打印’)
printJS({
printable: ‘printCons’,
type: ‘html’,
//properties: [
// { field: ‘name’, displayName: ‘姓名’, columnSize:`50%`},
// { field: ‘sex’, displayName: ‘性别’,columnSize:`50%`},
//],
// header: `
名单
`,
// style: ‘#printCons {width: 600px;} .no-print{width: 0px} .itemText1 { width: 200px } .itemText2 { width: 200px } .itemText3 { width: 200px } .itemText4 { width: 200px }’,
// gridHeaderStyle:’font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;’,
// gridStyle:’font-size:12px; padding:3px; border:1px solid; text-align:left;’,
// repeatTableHeader: true,
// scanStyles:true,
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，使其不打印。非常好用
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/179446.html原文链接：https://javaforall.net
