前端通过 jspdf 和 html2canvas 工具将网页生成 pdf

最新推荐文章于 2025-04-14 14:45:24 发布

原创最新推荐文章于 2025-04-14 14:45:24 发布 · 570 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pdf #javascript

由于 html2canvas 的性能问题，该方案对于页数比较多的场景生成的非常慢，可以试着使用 modern-screenshot 工具看是否性能会得到提升。

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

async function exportPdf(){
  const pages = document.querySelectorAll('.report-page')
  if (!pages.length) return
  const doc = new jsPDF({
    orientation: pageConfig.pageDirection as // 页面方向
      | 'p'
      | 'portrait'
      | 'l'
      | 'landscape'
      | undefined,
    format: pageConfig.pageSize, // 页面大小，例如 'A4'
    unit: 'mm',
  })
  for (const [i, page] of pages.entries()) {
    curPage.value = i + 1 // 当前页码
    if (i !== 0) {
      doc.addPage(
        pageConfig.pageSize,
        pageConfig.pageDirection as
          | 'p'
          | 'portrait'
          | 'l'
          | 'landscape'
          | undefined,
      )
    }
    page.style.border = 'none'
    const canvas = await html2canvas(page, {
      scale: 5,
    })
    const isNormalPage = pageConfig.value.pageDirection === 'p'
    doc.addImage({
      imageData: canvas.toDataURL('image/jpeg'),
      format: 'JPEG',
      x: 0,
      y: 0,
      width: isNormalPage
        ? pageConfig.pageWidth
        : pageConfig.pageHeight,
      height: isNormalPage
        ? pageConfig.pageHeight
        : pageConfig.pageWidth,
    })
  }
  const rawdata = doc.output('datauristring')
  window.pdfData = rawdata
  doc.save(`${pageConfig.name || '预览'}.pdf`)
}

执行完 doc.save 后会自动触发浏览器下载。