import html2canvas from 'html2canvas'; import JsPDF from 'jspdf'; /** * @param ele 要生成 pdf 的DOM元素(容器) * @param padfName PDF文件生成后的文件名字 * @width pdfW pdf文件夹大小 * @height pdfH pdf文件大小 * */ const downloadPDF = async (ele, pdfName, pdfW, pdfH) => { let eles = Array.isArray(ele) ? ele : [ele]; console.log( pdfW, pdfH); let eleW = ele.offsetWidth; // 获得该容器的宽 let eleH = ele.offsetHeight; // 获得该容器的高 // 创建jspdf let pdf = new JsPDF( { orientation: 'p', unit: 'mm', format: [pdfW, pdfH], }); // html2canvas配置 const style = { taintTest: false, dpi: 300, // 将分辨率提高到特定的DPI 提高四倍 allowTaint: true, // 允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的 useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 backgroundColor: null, // 画布背景颜色 null为透明 } // 循环所有的 img 元素 for (let i = 0; i < eles.length; i++) { const ele = eles[i]; // 使用 html2canvas 将 img 元素转换为 canvas 对象 const canvas = await html2canvas(ele, style); // 将 canvas 添加到 PDF 文档中 pdf.addImage( canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height ) // 如果不是最后一个元素,则添加一页 PDF 文档 if (i !== eles.length-1) pdf.addPage(); } // 生成pdf pdf.save(pdfName); // 将 PDF 导出为 base64 数据 const pdfBase64 = pdf.output('datauristring'); return pdfBase64; }; export default { downloadPDF, }
html2canvas+JsPDF实现单或多图片导出PDF
于 2023-04-21 14:48:39 首次发布