打印 print-js

 

一、传送门：官方文档、大神文档

二、单独使用 print-js

1、封装 print

 1   print(ref, title, style, type, jsonData, borderHeadStyle, gridStyle, css) {
 2     printJS({
 3       printable: ref,
 4       header: title || null,
 5       type: type || 'html',
 6       headerStyle: 'font-size:6px;font-weight:600;text-align:center;padding:15px 0 10px 0;',//标题设置
 7       properties: jsonData || [],//json数据元
 8       gridHeaderStyle: borderHeadStyle || 'font-size:6px;font-weight:400;height:40px;line-height:40px;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json格式表头样式
 9       gridStyle: gridStyle || 'font-size:1px;font-weight:200;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json各式表哥央视
10       scanStyles: false,//不适用默认样式
11       repeatTableHeader: false,//打印json表头只显示在第一页
12       style: style || '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}',//去除页眉页脚
13       css: css || null,//css url
14     })
15   }

 

2、调用

// 打印
// this.$refs.printForm 要打印的 内容
goPrint() {
    this.print(this.$refs.printForm)
},

 

 

三、将内容转图片格式进行打印（需要额外安装 html2canvas 插件）

 1   toPrint(ref, title, Rendering) {
 2     html2canvas(ref, {
 3       backgroundColor: null,
 4       useCORS: true,
 5       foreignObjectRendering: Rendering || false,
 6       windowWidth: document.body.scrollWidth,
 7       windowHeight: document.body.scrollHeight
 8     }).then((canvas) => {
 9       const url = canvas.toDataURL()
10       this.img = url
11       printJS({
12         printable: url,
13         type: 'image',
14         documentTitle: title
15       })
16     })
17   }