vue 使用print-js 打印html页面

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: `<p class="custom-p"> 名单 </p>`,
                    // 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，使其不打印。非常好用