前端生成pdf

依赖文件：

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js
https://html2canvas.hertzen.com/dist/html2canvas.min.js

注：jspdf文件使用debug版本，否则再ie10浏览器下会失效，项目兼容ie10及以上

原理

使用html2canvas对dom元素进行绘制，转换为canvas对象，并且调用canvas对象的api转为图片数据格式，最终通过jspdf插件进行绘制图片。

缺点：

1：生成的pdf质量差，清晰度较低。（可通过放大canvas绘制区域和设置dpi的方式提升，相应的pdf文件大小也会提升） 2：不会自动计算pdf的页数，绘制的内容位置/大小都需要主动设置，不方便 优点：前端生成，

最终：没有使用前端生成的方案，使用基于puppeteer的node中间层生成pdf

const doc = new window.jsPDF('', 'px', 'a4');
doc.text("Download PDF!", 10, 20);
// id是capture的容器为普通html结构，可指定分辨dpi和放大倍数scale，dpi可为96的倍数，数值越大生成的越清晰，质量也越大
const canvas = await window.html2canvas(document.getElementById("capture"), {
    scale: 8,
    dpi: 768,
});
// textbox 为一个折现图表。echarts higgcharts 随意
const canvas1 = await window.html2canvas(document.getElementById("textbox"), {
    scale: 8,
    dpi: 768,
});
// 添加一页pdf 并绘制之前的html，需注意后面的几个数值参数
分别是x轴坐标，y轴坐标，图片的宽高
doc.addImage(canvas.toDataURL("image/jpeg", 1), "JPEG", 0, 40, 300, 35);
// doc.addPage();
// doc.addImage(this.chart.toDataURL('image/jpeg', 1), 'JPEG', 0, 100, 150, 75);
doc.addImage(
canvas1.toDataURL("image/jpeg", 1), "JPEG", 0, 100, 300, 150);
doc.save("a4.pdf");