如何使用jsPDF设置图像以适应页面宽度？

Question

有什么办法可以解决这个问题吗？我试图以毫米为单位设置宽度和高度。如何将其设置为全角？

原文由 sreeraj nyros 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以像下面这样获得 PDF 文档的宽度和高度，

 var doc = new jsPDF("p", "mm", "a4");

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();

然后你可以使用这个宽度和高度来让你的图像适合整个 PDF 文档。

 var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......';

doc.addImage(imgData, 'JPEG', 0, 0, width, height);

确保您的图像与 PDF 文档具有相同的尺寸（分辨率）。否则它看起来会变形（拉伸）。

如果你想转换 px 到 mm 使用这个链接 http://www.endmemo.com/sconvert/millimeterpixel.php

原文由 Purushoth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您需要获得 PDF 文件的 宽度 100% 和 自动高度，您可以使用 getImageProperties html2canvas 库的属性

html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
          orientation: 'landscape',
        });
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('download.pdf');
      });

原文由 Philip 发布，翻译遵循 CC BY-SA 4.0 许可协议