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)