使用html2canvas导出pdf文件

117 阅读1分钟

实现代码

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export function exportPdf(el, title) {
  const scale = window.devicePixelRatio
  const dpi = window.devicePixelRatio * 4
  const width = el.scrollWidth
  const height = el.scrollHeight
  html2Canvas(el, {
    scale,
    dpi,
    useCORS: true,
    allowTaint: false,
    imageTimeout: 2000,
    width,
    height,
    removeContainer: true,
  }).then(function (canvas) {
    var pageData = canvas.toDataURL('image/jpeg', 1.0)
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = (contentWidth / 592.28) * 841.89
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 592.28
    let imgHeight = (592.28 / contentWidth) * contentHeight
    let PDF = new JsPDF('', 'pt', 'a4')
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(title + '.pdf')
  })
}

其中,el为html,title为导出文件名。