前端使用html2pdf库将页面的html元素导出为PDF

前端在vue项目中主要有三种将页面的html元素导出为PDF的方式，使用 html2pdf.js、jsPDF + html2canvas、vue-html2pdf，我推荐使用html2pdf.js，需结合jsPDF + html2canvas使用

使用html2pdf首先下载

npm install html2pdf.js
# 或
yarn add html2pdf.js

npm install jspdf html2canvas
# 或
yarn add jspdf html2canvas

然后在组件中引用

import html2pdf from 'html2pdf.js'

import jsPDF from 'jspdf';

import html2canvas from 'html2canvas';

 下边是简单的使用

exportToPDF() {
     const element = this.$refs.pdfContent;
      
     const opt = {
       margin: 10, // PDF 页面的边距（单位由 jsPDF.unit 决定），默认 10（即 10mm）
       filename: 'report.pdf', //生成的 PDF 文件名（用户下载时会显示），如 'report.pdf'
       image: { type: 'jpeg', quality: 0.98 }, //截图格式，可选 'jpeg'、'png'。'jpeg' 体积更小，但可能损失透明度。quality:图片质量（仅对 jpeg 有效），范围 0（最差）到 1（最佳）。0.98 是高质量设置。
       html2canvas: { 
         scale: 2, //渲染缩放倍数（2 表示 2 倍尺寸），提高此值可增强清晰度，但会增加文件大小
         useCORS: true, // 允许跨域图片
         logging: true // 调试用
       },
       jsPDF: { 
        unit: 'mm', //页面尺寸单位，可选 'mm'（毫米）、'pt'（磅）、'in'（英寸）。'mm' 最常用
        format: 'a4', //纸张规格，如 'a4'（A4 纸）、'letter'（信纸）
        orientation: 'portrait' //页面方向：'portrait'（纵向，默认）、'landscape'（横向
      }
   };

   html2pdf().set(opt).from(element).save(); //生成pdf
}

需注意，如果html文件过大，会出现导出的pdf文件全是空白

这时需调整 html2canvas中的scale属性大小，本次我遇到的问题就是html文件过大，因是从后端接取的html数据，前端使用v-html渲染页面，不知道具体有多大，所以一直导出来的是空白页，研究了一天终于发现scale清晰度过高导致导出空白，调小之后就可以正常导出了