jsPDF 单元和 HTML 单元在生成的 PDF 中未对齐答案

【问题标题】：jsPDF units and HTML units are not aligned in the generated PDFjsPDF 单元和 HTML 单元在生成的 PDF 中未对齐
【发布时间】：2021-09-14 16:25:09
【问题描述】：

jsFiddle：https://jsfiddle.net/0oa3uf9b/ （由于浏览器安全等原因，我不知道您是否真的能够下载该文件，但如果您将其放在本地文件中，该代码将可以正常工作。）

我尝试了两种从 HTML 元素生成 PDF 的不同方法。每个方法都设置与源相同的元素；这个div 有width: 4in 和height: 2in。

对于方法 1，我将 jsPDF 的 format 设置为 jQuery 中 div 的 .width() 和 .height() 值。

对于方法 2，我将 format 设置为 unit: "in" 和 format: [4,2]。

这两种方法都不完全奏效。

方法1会正确生成pdf，但是pdf的实际页面大小不是2x4in。
这是 Adobe Reader DC 告诉我的关于 PDF 的内容：

方法 2 的页面大小正确为 2x4 英寸，但只会为 PDF 生成大量空白页...
Adobe:

我不明白为什么，当我为 jsPDF 指定 2x4in 页面大小时，生成的 PDF 只是充满了空白页，而生成正确 PDF 的唯一方法是使用 width 和 height 属性，这即使 HTML/CSS 设置为 2x4in，也不是 2x4in。

任何帮助表示赞赏。

【问题讨论】：

@KJ 是的，这很奇怪...我实际上决定使用html2canvas 生成图像，然后使用jsPDF.addImage()，而不是调用jsPDF.html() 并让它自己完成工作使用html2canvas 和dompurify;，它的工作要好得多。一旦解决了大部分问题，我将发布我的解决方案。

标签： javascript html pdf jspdf

【解决方案1】：

由于某种原因，jsPDF 对 html2canvas 的使用似乎被破坏了，但如果你自己调用 html2canvas，你可以让它工作

这是一个工作的 jsFiddle：https://jsfiddle.net/k47zjb26/（同样，在 jsFiddle 中似乎并没有实际工作，将其复制到本地文件进行测试）

基本上，将您的任何jsPDF.html(source) 调用替换为：

调用 html2canvas，然后调用 jsPDF.addImage()

html2canvas(source, {
    scale: 1
}).then(function(canvas) {
    document.body.appendChild(canvas);
    doc.addImage(canvas, 'JPEG', 0, 0);
    doc.save('MethodCanvas');
});

【讨论】：