jsPDF没有正确缩放html2canvas图像答案

【问题标题】：jsPDF not scaling html2canvas image correctlyjsPDF没有正确缩放html2canvas图像
【发布时间】：2019-09-17 20:43:10
【问题描述】：

我有一个函数，它接受一个 div，并使用 jsPDF 将其保存到 PDF 文档中。
我正在苦苦挣扎的是为什么 jsPDF 不尊重我的选择

我希望 PDF 文件是横向的，宽 297 毫米（A4 横向宽度），然后将 PDF 的高度设置为缩放后的大小，并用图像填充 PDF。

我的功能如下：

const input = document.getElementById(id);
const inputHeightMm = pxToMm(input.offsetHeight);
const inputWidthMm = pxToMm(input.offsetWidth);
const a4WidthMm = 297;
const a4HeightMm = 210;
const ratio = inputHeightMm/inputWidthMm;
console.log(a4WidthMm, a4WidthMm * ratio )

html2canvas(input)
    .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
            orientation: 'landscape',
            unit: "mm",
            format: [a4WidthMm, a4WidthMm * ratio ]
        });
        pdf.addImage(imgData, 'PNG', 0, 0, a4WidthMm, a4WidthMm* ratio );
        return pdf.save(`${v}.pdf`);
    });

但发生的情况是，我得到了一个 PDF，其中图像被截断，因为它似乎没有将其缩放到正确的大小。
在检查它输出的 PDF 时，它还说它只有 4.13" x 1.96"，即 104 毫米宽，而不是传递给它的 297 毫米

【问题讨论】：

标签： javascript jspdf

【解决方案1】：

你可以试试

pdf.addImage(imgData, 'PNG', 0, 0, undefined, undefined );

而不是

pdf.addImage(imgData, 'PNG', 0, 0, a4WidthMm, a4WidthMm* ratio );

看看是否产生相同的结果？

addImage(imageData, format, x, y, width, height, alias, compression, rotation), width 和 height 用于调整生成的图像大小的文档点。如果您保留它未定义，图像将以其原始大小和比例放置在 PDF 上。

【讨论】：