javascript pdf导出

pdf导出
HTML2CANVAS
如果图片出现拆分现象 建议实现方式时 小于打印a4纸高度就再图片上边加一个div把图片挤下去单独起一张纸

function(targetDom, name, callback) {
    html2canvas(targetDom, {
      allowTaint: true,
      useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
      backgroundColor: '#FFFFFF',
      scale, // 提升画面质量，但是会增加文件大小
      imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
      height: targetDom.scrollHeight, // canvas的高度设定
      width: targetDom.scrollWidth, // canvas的宽度设定
      dpi: 120, // 将分辨率提高到特定的DPI
    }).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 pdf2 = new JsPDF('p', 'pt', 'a4') // A4纸，纵向

      // var index = 1
      var canvas1 = document.createElement('canvas')
      var height
      pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')
      pdf2.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

      var pdfName = name

      // eslint-disable-next-line no-irregular-whitespace
      function createImpl(canvas) {
        // 获取第一个文件总页数
        let targetPage = pdf.internal.getNumberOfPages()
        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
          var ctx = canvas1.getContext('2d')
          ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height)
          // eslint-disable-next-line no-unused-vars
          var pageHeight = Math.round((a4Width / canvas.width) * height)
          // pdf.setPageSize(null, pageHeight)
          if (position !== 0 && targetPage < 30) {
            pdf.addPage()
          } else if (position !== 0) {
            // 超过30页，图片添加到第二个文件
            pdf2.addPage()
          }
          if (targetPage < 30) {
            pdf.addImage(
              canvas1.toDataURL('image/jpeg', 1.0),
              'JPEG',
              10,
              10,
              a4Width - 20,
              (a4Width / canvas1.width) * height - 20,
            )
          } else {
            // 超过30页，图片添加到第二个文件
            pdf2.addImage(
              canvas1.toDataURL('image/jpeg', 1.0),
              'JPEG',
              10,
              10,
              a4Width - 20,
              (a4Width / canvas1.width) * height - 20,
            )
          }
          leftHeight -= height
          position += height
          if (leftHeight > 0) {
            setTimeout(createImpl, 500, canvas)
          } else {
            // 获取第二个文件总页数
            let targetPage2 = pdf2.internal.getNumberOfPages() // 获取总页
            if (targetPage2 > 1) {
              // 第二个文件有内容时，一起导出
              pdf2.deletePage(1) // 删除第一张空白页
              pdf2.save(pdfName + '.pdf')
            }
            pdf.save(pdfName + '.pdf')
          }
        }
      }

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