由于 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 后会自动触发浏览器下载。