vue 中将页面 html 内容导出成 pdf 文件格式，使用 html2canvas 、jspdf 。
首先使用 html2canvas 将内容转换为图片，之后写入 pdf 。
参考链接：vue页面导出pdf，预览并下载（pc端） - 简书
1、引用
第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save
2、创建 exportToPdf.js ，放入导出方法
// exportToPdf.js import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; export function exportToPDF(fileName,elementId) { // 根据元素ID获取要导出的元素 const element = document.getElementById(elementId); if (!element) { console.error('无法找到指定的元素'); return; } // 使用 html2canvas 将元素转换为 canvas html2canvas(element).then(canvas => { // 创建一个新的 jsPDF 实例 const pdf = new jsPDF('p', 'mm', 'a4'); // 将 canvas 转换为图片并添加到 PDF const imgProps = canvas.toDataURL('image/png'); const imgPropsArr = imgProps.split(','), mimeType = imgPropsArr[0].match(/:(.*?);/)[1]; const img = new Image(); img.onload = function() { // 获取图片的宽高 const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (img.height * pdfWidth) / img.width; // 添加图片到 PDF pdf.addImage(imgProps, mimeType, 0, 0, pdfWidth, pdfHeight); // 保存 PDF pdf.save(fileName); //预览 /* // 生成PDF的Blob对象 const pdfBlob = pdf.output('blob'); // 创建一个指向Blob对象的URL const pdfUrl = URL.createObjectURL(pdfBlob); // 打开新窗口预览PDF const win = window.open(); win.document.write(` <html> <head> <title>PDF Preview</title> </head> <body> <embed src="${pdfUrl}" type="application/pdf" width="100%" height="100%"> </body> </html> `);*/ // 你可以选择在预览后释放URL，但这会关闭预览（如果浏览器支持） //URL.revokeObjectURL(pdfUrl); }; img.src = imgProps; }).catch(error => { console.error('导出PDF时发生错误:', error); }); }
3、vue中调用
<template> <div style="text-align: center"> <div> <div> <button type="button" @click="pdfBtn">导出PDF</button> </div> <div id="pdfDom" > <div>内容</div> </div> </div> </div> </template> <script> // 导入exportToPDF函数 import { exportToPDF } from '@/utils/feature/exportToPdf'; export default { name: "exportpdf", data(){ return{ htmlTitle:'页面导出PDF文件名', } }, methods:{ pdfBtn(){ exportToPDF(this.htmlTitle,'pdfDom'); }, } } </script> <style scoped> </style>
-- 更新，上面方法测试发现仅能导出一页的内容，找到了导出多页的方法
原理：获取需要导出内容页面的总高度，根据A4纸张的高度，pdf中循环添加多页，直到全部绘制结束后导出pdf。
缺点：很多地方强制截断了，看起来很别扭，而且页边距也不好控制。
methods: { async exportToPDF2() { const content = document.getElementById('pdfDom'); // 获取页面高度和宽度（这里需要调整以适应你的内容） const pageHeight = content.scrollHeight || content.clientHeight; const pageWidth = content.scrollWidth || content.clientWidth; // 创建一个新的 jsPDF 实例 const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' 代表 portrait（纵向），'mm' 代表毫米，'a4' 代表 A4 纸张大小 // 定义内容的高度和宽度，以及每页的高度（这里需要调整以适应你的内容） const contentLeft = 0; // 内容左边距 const contentTop = 0; // 内容上边距 const contentWidth = pageWidth - 2 * contentLeft; // 内容宽度（减去左右边距） // 假设的页面尺寸和边距 const pageSize = { width: 595.28, // A4 纸宽度，单位：点（1英寸 = 72点） height: 841.89 // A4 纸高度，单位：点 }; // 计算当前页面可以容纳的内容高度 const contentHeight = pageSize.height - contentTop; const imgProps = { scale: 1 }; // 用于 html2canvas 的图像属性 let position = 0; // 初始化内容在 PDF 中的位置 let y = contentTop; // 初始化 PDF 页面上的 y 坐标 // 循环直到所有内容都被导出 while (position < pageHeight) { // 计算当前页面的内容高度（可能需要调整以确保内容不会溢出） const pageContentHeight = (y + contentHeight > pageHeight) ? pageHeight - y : contentHeight; // 使用 html2canvas 捕获当前页面的内容 const canvas = await html2canvas(content, { // 你可以在这里添加更多的 html2canvas 配置选项 height: pageContentHeight, width: contentWidth, x: 0, y: position, scale: 1, ...imgProps, }); // 将 canvas 添加到 PDF 页面中 const imgData = canvas.toDataURL('image/png'); const imgPropsPDF = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgPropsPDF.height * pdfWidth) / imgPropsPDF.width; pdf.addImage(imgData, 'PNG', pdfWidth, y+pdfHeight, pdfWidth, pdfHeight); // 更新 y 坐标以便下一页的内容 y += pdfHeight + 10; // 10 是页面间的间距，可以根据需要调整 // 如果内容超出了当前页面，则添加新页面 if (y > pdfHeight) { if(position+contentHeight < pageHeight) { pdf.addPage(); } y = contentTop; position += contentHeight; // 更新内容在原始 HTML 中的位置 } } // 保存 PDF pdf.save('exported.pdf'); } }
