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

Question

有什么方法可以解决这个问题吗？我试图以mm为单位设置宽度和高度.如何将其设置为全宽？

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

Answer 2

我的回答是关于你要问的更具体的案例,但我认为可以从中得出一些想法以更普遍地应用.另外,如果我能做的话,我会发布这篇文章作为对Purushoth答案(我的基础上的答案)的评论.

好吧,我的问题是如何将网页放入pdf文档,而不会丢失宽高比.我使用jsPDF与html2canvas结合,我从我div的宽度和高度计算了比率.我将相同的比率应用于pdf文档,页面完美地适合页面而没有任何失真.

var divHeight = $('#div_id').height();
var divWidth = $('#div_id').width();
var ratio = divHeight / divWidth;
html2canvas(document.getElementById("div_id"), {
     height: divHeight,
     width: divWidth,
     onrendered: function(canvas) {
          var image = canvas.toDataURL("image/jpeg");
          var doc = new jsPDF(); // using defaults: orientation=portrait, unit=mm, size=A4
          var width = doc.internal.pageSize.getWidth();    
          var height = doc.internal.pageSize.getHeight();
          height = ratio * width;
          doc.addImage(image, 'JPEG', 0, 0, width-20, height-10);
          doc.save('myPage.pdf'); //Download the rendered PDF.
     }
});

Answer 3

适用于所有屏幕尺寸和动态方向的解决方案：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default async function downloadComponentInPDF(Component: HTMLElement) {
  await html2canvas(Component).then((canvas) => {
    const componentWidth = Component.offsetWidth
    const componentHeight = Component.offsetHeight

    const orientation = componentWidth >= componentHeight ? 'l' : 'p'

    const imgData = canvas.toDataURL('image/png')
    const pdf = new jsPDF({
    orientation,
    unit: 'px'
  })

    pdf.internal.pageSize.width = componentWidth
    pdf.internal.pageSize.height = componentHeight

    pdf.addImage(imgData, 'PNG', 0, 0, componentWidth, componentHeight)
    pdf.save('download.pdf')
  })
}

Answer 4

如果您需要获取100％的PDF文件宽度和自动高度，可以使用'getImageProperties'属性。

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');
      });

Answer 5

自提交以来,API已更改,现在使用版本1.4.1

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

Answer 6

我今天早上在尝试html2canvas时发现了这一点。虽然这不包括用于打印多页的规定，但它确实将图像缩放到页面宽度，并以与调整后的宽度成比例的方式重新构造高度：

html2canvas(document.getElementById('testdiv')).then(function(canvas){
        var wid: number
        var hgt: number
        var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
        var hratio = hgt/wid
        var doc = new jsPDF('p','pt','a4');
        var width = doc.internal.pageSize.width;    
        var height = width * hratio
        doc.addImage(img,'JPEG',20,20, width, height);
        doc.save('Test.pdf');
    });

Answer 7

如果只有一张图像，很容易适应页面。更具挑战性的任务是将各种尺寸的图像适合 pdf 文件。归档的关键是计算图像的长宽比和页面的相对宽高比。以下代码是我用来将多个图像在线转换为 PDF 文件的代码。它将根据图像/页面的方向旋转图像并设置适当的边距。我的项目使用带有在线 src 的图像。您应该能够进行修改以满足您的需求。

至于图像旋转，如果旋转后看到空白页，则可能只是图像超出范围。有关详细信息，请参阅此答案。

function exportPdf(urls) {
    let pdf = new jsPDF('l', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const pageRatio = pageWidth / pageHeight;

    for (let i = 0; i < urls.length; i++) {
        let img = new Image();
        img.src = urls[i];
        img.onload = function () {
            const imgWidth = this.width;
            const imgHeight = this.height;
            const imgRatio = imgWidth / imgHeight;
            if (i > 0) { pdf.addPage(); }
            pdf.setPage(i + 1);
            if (imgRatio >= 1) {
                const wc = imgWidth / pageWidth;
                if (imgRatio >= pageRatio) {
                    pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
                }
                else {
                    const pi = pageRatio / imgRatio;
                    pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
                }
            }
            else {
                const wc = imgWidth / pageHeight;
                if (1 / imgRatio > pageRatio) {
                    const ip = (1 / imgRatio) / pageRatio;
                    const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4;
                    pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
                }
                else {

                    pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
                }
            }
            if (i == urls.length - 1) {
                pdf.save('Photo.pdf');
            }
        }
    }
}

如果这有点难以理解，您也可以使用.addPage([imgWidth, imgHeight])，这更简单。这种方法的缺点是首页是固定的new jsPDF()。有关详细信息，请参阅此答案。

Answer 8

如果您希望动态大小的图像尽可能多地自动填充页面并仍然保持图像的宽度/高度比，您可以执行以下操作：

let width = doc.internal.pageSize.getWidth()
let height = doc.internal.pageSize.getHeight()

let widthRatio = width / canvas.width
let heightRatio = height / canvas.height

let ratio = widthRatio > heightRatio ? heightRatio : widthRatio

doc.addImage(
  canvas.toDataURL('image/jpeg', 1.0),
  'JPEG',
  0,
  0,
  canvas.width * ratio,
  canvas.height * ratio,
)