打印 print-js

 

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

二、单独使用 print-js

1、封装 print

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

 

2、调用

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

 

 

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

  toPrint(ref, title, Rendering) {
    html2canvas(ref, {
      backgroundColor: null,
      useCORS: true,
      foreignObjectRendering: Rendering || false,
      windowWidth: document.body.scrollWidth,
      windowHeight: document.body.scrollHeight
    }).then((canvas) => {
      const url = canvas.toDataURL()
      this.img = url
      printJS({
        printable: url,
        type: 'image',
        documentTitle: title
      })
    })
  }