oa-system/src/store/htmlToPdf.js

// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'
const htmlPdf = {
  getPdf(title, html) {
    html2Canvas(html, {
      allowTaint: true,
      useCORS: true,
      dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
      background: '#FFFFFF',
    }).then(canvas => {
      //未生成pdf的html页面高度
      var leftHeight = canvas.height

      var a4Width = 595.28
      var a4Height = 841.89 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      //一页pdf显示html页面生成的canvas高度;
      var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

      //pdf页面偏移
      var position = 0

      var pageData = canvas.toDataURL('image/jpeg', 1.0)

      var pdf = new JsPDF('p', 'pt', 'a4') //A4纸，纵向
      var index = 1,
        canvas1 = document.createElement('canvas'),
        height
      pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

      var pdfName = title

      function createImpl(canvas) {
        console.log(leftHeight, a4HeightRef)
        if (leftHeight > 0) {
          index++

          var checkCount = 0
          if (leftHeight > a4HeightRef) {
            var i = position + a4HeightRef
            for (i = position + a4HeightRef; i >= position; i--) {
              var isWrite = true
              for (var j = 0; j < canvas.width; j++) {
                var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                  isWrite = false
                  break
                }
              }
              if (isWrite) {
                checkCount++
                if (checkCount >= 10) {
                  break
                }
              } else {
                checkCount = 0
              }
            }
            height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
            if (height <= 0) {
              height = a4HeightRef
            }
          } else {
            height = leftHeight
          }

          canvas1.width = canvas.width
          canvas1.height = height

          console.log(index, 'height:', height, 'pos', position)

          var ctx = canvas1.getContext('2d')
          ctx.drawImage(
            canvas,
            0,
            position,
            canvas.width,
            height,
            0,
            0,
            canvas.width,
            height,
          )

          var pageHeight = Math.round((a4Width / canvas.width) * height)
          // pdf.setPageSize(null, pageHeight)
          if (position != 0) {
            pdf.addPage()
          }
          pdf.addImage(
            canvas1.toDataURL('image/jpeg', 1.0),
            'JPEG',
            10,
            10,
            a4Width,
            (a4Width / canvas1.width) * height,
          )
          leftHeight -= height
          position += height
          if (leftHeight > 0) {
            setTimeout(createImpl, 500, canvas)
          } else {
            pdf.save(title + '.pdf')
          }
        }
      }

      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < a4HeightRef) {
        pdf.addImage(
          pageData,
          'JPEG',
          0,
          0,
          a4Width,
          (a4Width / canvas.width) * leftHeight,
        )
        pdf.save(title + '.pdf')
      } else {
        try {
          pdf.deletePage(0)
          setTimeout(createImpl, 500, canvas)
        } catch (err) {
          // console.log(err);
        }
      }
    })

  }
}

export default htmlPdf