打印 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
      })
    })
  }