时间戳

首页 > 解决方案 > jsPDF没有正确缩放html2canvas图像

javascript - jsPDF没有正确缩放html2canvas图像

问题描述

我有一个接受 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 毫米

标签： javascriptjspdf

解决方案

你能试一下吗

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 上。

推荐阅读