使用jspdf、html2canvas将页面元素转换为图片并导出为pdf

1、下载 jspdf、html2canvas两个依赖

npm install jspdf html2canvas

2、Vue页面组件中使用

import jsPDF from "jspdf";
import html2canvas from "html2canvas";

// 下载结算单
async exportPdf() {
   // 获取表格的HTML元素
   const table = this.$refs.tableEl;

   // 使用html2canvas将表格转换为canvas, dpi:设置截图分辨率, scale:设置图片缩放比例，可调整图片清晰度
   const canvas = await html2canvas(table, {dpi:300, scale: 3 });

   // 创建一个新的jsPDF实例
   const pdf = new jsPDF();

   // 获取图片在pdf中的宽高，与浏览器中保持纵横比
   const pdfWidth = pdf.internal.pageSize.getWidth() - 8;
   const pdfHeight = pdfWidth * (canvas.height / canvas.width);

   // 将canvas内容添加到PDF中
   pdf.addImage(
       canvas.toDataURL("image/png"),
       "PNG",
       4,
       4,
       pdfWidth,
       pdfHeight,
       "别名",
       1
   );

   // 保存PDF
   pdf.save("a.pdf");
},

3、pdf.addimage的用法介绍

pdf.addImage(image, format, x, y, width, height, alias, compression, rotation)

3.1、参数介绍

1、image：表示要插入的图片资源，可以是图片文件的路径或者base64编码字符串。

2、format：表示要插入的图片格式，包括：‘JPEG’, ‘PNG’, ‘GIF’, ‘BMP’, ‘TIFF’, ‘RAW’, ‘JPEG2000’。

3、x：图片在PDF中的x轴坐标，单位为pt（点）。

4、y：图片在PDF中的y轴坐标，单位为pt（点）。

5、width：图片在PDF中的宽度，单位为pt（点）。

6、height：图片在PDF中的高度，单位为pt（点）。

7、alias（可选）：指定图片资源的别名。

8、compression（可选）：指定图片的压缩质量，取值为0-1之间的浮点数。

9、rotation（可选）：指定图片的旋转角度，取值范围为0-360之间的整数。