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

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

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'async function exportPdf(){const pages = document.querySelectorAll('.report-page')if (!pages.length) returnconst 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 = rawdatadoc.save(`${pageConfig.name || '预览'}.pdf`)
}

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