vue项目纯前端实现导出pdf文件
1、下载插件
npm install html2canvas
npm install jspdf
2、创建htmlToPdf.js，地址：src/utils/htmlToPdf.js
import html2Canvas from 'html2Canvas'
import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.getPdfFromHtml = function (eleId, pdfFileName, hide) { // 确保传入了正确的元素ID const ele = document.getElementById(eleId); if (!ele) { console.error('No element found with ID:', eleId); return; } pdfFileName = pdfFileName || "pdf"; // 滚动置顶（如果需要） window.pageYOffset = 0; // 或者使用 window.scrollTo(0, 0); // ... 其他可能的滚动设置（如果有） // 使用html2canvas捕获元素并转换为canvas html2Canvas(ele, { dpi: window.devicePixelRatio * 2, // 根据需要调整DPI useCORS: true, // 允许跨域图片 // ... 其他选项 }).then(canvas => { // 隐藏加载消息（如果有） this.$message.closeAll(); // 假设您使用的是Element UI的message组件 // 创建PDF文档并添加canvas内容 const pdf = new JsPDF('p', 'mm', 'a4'); // 使用A4纸，横向 const imgProps = pdf.getImageProperties(canvas.toDataURL('image/png')); // 根据需要添加多页内容（如果需要） let heightLeft = imgProps.height; const top_left_margin = 10; // 您可以根据需要调整边距 const pdfWidth = pdf.internal.pageSize.getWidth() - 2*top_left_margin; const pdfHeight = pdf.internal.pageSize.getHeight() - 2*top_left_margin; while(heightLeft > 0) { pdf.addImage(canvas.toDataURL('image/png'), 'PNG', top_left_margin, top_left_margin, pdfWidth, Math.min(pdfHeight, heightLeft)); if (heightLeft > pdfHeight) { pdf.addPage(); } heightLeft -= pdfHeight; // 如果需要，可以在此处添加页眉/页脚等 } // 保存PDF pdf.save(pdfFileName + '.pdf'); }).catch(error => { console.error('Error generating PDF:', error); // 显示错误消息（如果需要） this.$message.error('生成PDF时出错'); }); }; }
};3、main.js中引入
import htmlToPdf from './utils/htmlToPdf.js'Vue.use(htmlToPdf)4、vue页面中使用
在需要打印的块元素上边添加id='pdfDom'
this.GetPdfFromHtml('pdfDom',this.name)