时间戳

首页 > 解决方案 > jsPDF 单元和 HTML 单元在生成的 PDF 中未对齐

javascript - jsPDF 单元和 HTML 单元在生成的 PDF 中未对齐

问题描述

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

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

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

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

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

方法1会正确生成pdf，但是pdf的实际页面大小不是2x4in。
这是 Adob​​e Reader DC 告诉我的关于 PDF 的内容：在此处输入图像描述

方法 2 的正确页面大小为 2x4 英寸，但只会为 PDF 生成大量空白页...
Adob​​e：在此处输入图像描述

我不知道为什么，当我为 jsPDF 指定 2x4in 页面大小时，生成的 PDF 只是充满了空白页，而生成正确 PDF 的唯一方法是使用宽度和高度属性，然后不是' t 2x4in 即使 HTML/CSS 设置为 2x4in。

任何帮助表示赞赏。

标签： javascripthtmlpdfjspdf

解决方案

由于某种原因，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');
});

推荐阅读