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

以上某些答案没有涵盖与html2canvas相关的响应式页面。如果您需要根据变化的元素尺寸调整图像大小，请使用以下代码：

html2canvas(input, { scrollY: -window.scrollY }).then((canvas) => {
  const imgData = canvas.toDataURL('image/jpeg');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgProps = pdf.getImageProperties(imgData);

  // doc and image dimensions
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();
  const imgWidth = imgProps.width;
  const imgHeight = imgProps.height;

  // claculating right scale to fit the page
  const scale = Math.max(pdfHeight / imgHeight, pdfWidth / imgWidth);
  const finalWidth = imgWidth * scale;
  const finalHeight = imgHeight * scale;
  const leftMargin = (pdfWidth - finalWidth) / 2;
  // add image with alias and compression of your choice
  pdf.addImage( imgData, 'PNG', leftMargin, 0, finalWidth, finalHeight, 'alias', 'FAST');
  pdf.save( 'report-name.pdf' );
});

这是我在Reactjs中实现的方法。

主要问题是比例和缩放。如果你快速执行window.devicePixelRatio，它的默认值为2，这导致了半个图像的问题。

const printDocument = () => {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new JSPDF("l", "mm", "a0"); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  })
}

我遇到了同样的问题，但是我用以下代码解决了它

html2canvas(body,{
                onrendered:function(canvas){
                    var pdf=new jsPDF("p", "mm", "a4");
                    var width = pdf.internal.pageSize.getWidth();    
                    var height = pdf.internal.pageSize.getHeight();
                    pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
                    pdf.save('test11.pdf');
                }
            }) 

const handleDownloadCertificate = async () => {
  const domElement = document.getElementById('certificate');

  if (domElement) {
    try {
      const canvas = await html2canvas(domElement, { scale: 2 });
      const imgData = canvas.toDataURL('image/png');

      const componentWidth = domElement.clientWidth;
      const componentHeight = domElement.clientHeight;

      const ratio = componentHeight / componentWidth;

      const width = 210; // in mm A4
      let height = 297; // in mm A4

      height = ratio * width;

      const pdf = new JSPDF('p', 'mm', [width, height]);

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

      const fileName = getCertificateName({ course, name });
      
      pdf.save(`${fileName}.pdf`);
      
    } catch (error) {
      console.error('Error building PDF', error);
    }
  }
};

const exportOrgChartPdfFormat = async (response) => {
  try {
    const blob = new Blob([response.data], { // response.data contains blob
      type: "image/png",
    });
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64data = reader.result;
      const img = new Image();
      img.onload = function () {
        const imgWidth = this.width;
        const imgHeight = this.height;
        const pdf = new jsPDF(
          imgWidth > imgHeight ? "l" : "p",
          "pt",
          [imgWidth, imgHeight]
        );
        **pdf.internal.pageSize.width = imgWidth;**
        **pdf.internal.pageSize.height = imgHeight;**
        pdf.addImage(
          base64data,
          "PNG",
          0,
          0,
          imgWidth,
          imgHeight
        );
        pdf.save("export.pdf");
      };

      img.src = base64data;
    };
    reader.readAsDataURL(blob);
  } catch (e) {
    return e;
  }
};

 const generatePDFfromHTML = async (htmlContentId: string, outputPath: string) => {
    const input = document.getElementById(htmlContentId)
    const scale = 2

    if (!input) {
        console.error(`HTML element with ID ${htmlContentId} not found.`)
        return
    }

    const scaledWidth = input.offsetWidth * scale
    const scaledHeight = input.offsetHeight * scale

    try {
        const dataUrl = await domtoimage.toPng(input, {
            width: scaledWidth,
            height: scaledHeight,
            style: {
                transform: "scale(" + scale + ")",
                transformOrigin: "top left",
            },
        })

        const pdf = new jsPDF()

        const img = new Image()
        img.src = dataUrl

        img.onload = () => {
            const pdfWidth = pdf.internal.pageSize.getWidth()
            const pdfHeight = (img.height * pdfWidth) / img.width
            pdf.addImage(dataUrl, "PNG", 0, 0, pdfWidth, pdfHeight)
            pdf.save(outputPath)
        }
    } catch (error) {
        console.error("Error generating PDF:", error)
    }
}

convertPhotoImageToPdf(imgPath){
   var doc = new jsPDF(undefined, null, null, true);
   var imgData = 'data:image/jpeg;base64,'+ imgPath;
   doc.addImage(imgData, 'JPEG',10,10,0,0,null,'FAST',0);
   //if want add one page 
   //doc.addPage()
   doc.save('testPdf.pdf')
}

        var width = doc.internal.pageSize.width;    
        var height = doc.internal.pageSize.height;