jsPDF下载生成多个页面--封装

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

/**

• 多页pdf下载封装
• @param {fm} 首页图(pdf中第一页)
• @returns {toRef} 选中的div=>如 ref="***" */ export async function convertPdfToJP(fm, toRef) { let element = toRef // 需要下载pdf的div let canvas = await html2canvas(element, { useCORS: true, scrollY: -window.scrollY })

let img = canvas.toDataURL('image/png') let images = [fm, img] let doc = new JsPDF() for (var i = 0; i < images.length; i++) { let imgElement = document.createElement('img') imgElement.src = images[i] document.body.appendChild(imgElement) let canvas = await html2canvas(imgElement) let imgData = canvas.toDataURL('image/png') let imgProps = doc.getImageProperties(imgData) let pdfWidth = doc.internal.pageSize.getWidth() let pdfHeight = (imgProps.height * pdfWidth) / imgProps.width doc.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight) document.body.removeChild(imgElement) doc.addPage() } doc.deletePage(doc.internal.getNumberOfPages()) // 删除最后一个空白页面 doc.save('sample.pdf') }