jsPDF 如何将图像设置为适合单个 PDF 文件的各种页面大小高度和宽度答案

【问题标题】：jsPDF How to set images to fit with various page size height & width to a single PDF filejsPDF 如何将图像设置为适合单个 PDF 文件的各种页面大小高度和宽度
【发布时间】：2021-03-10 07:11:23
【问题描述】：

我有多种不同大小（高度和宽度）的数据图像需要使用 jspdf、html2canvas 转换为 PDF，但是当我下载 pdf 时遇到问题，它适用于小名称用户数据但当我得到一个大名称或其他数据然后在右侧它会增加并像扭曲一样离开页面，如果用户名很小且数据较少，但当数据从X端离开页面时，我尝试了scrollX： 0 和 scrollX: -window.scrollX 都没有正确进入，请参阅数据编号下方的图像以及如何提高 PDF 质量。 ?

export const pdfDownloadHandler = (name, div, user) => {
  const input = document.getElementById(div);
  var clientHeight = input.clientHeight;
  var clientWidth = input.clientWidth;

  html2canvas(input,{
    scrollX: 0,
    scrollY: 0,
  }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdf = new jsPDF('p', 'px', [clientWidth, clientHeight]);
    console.log('@PDF: ', pdf, user);
    var width = pdf.internal.pageSize.getWidth();
    var height = pdf.internal.pageSize.getHeight();

    function loadImage(url) {
      return new Promise((resolve) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.src = url;
      })
    }


    pdf.addImage(imgData, 'jpeg', 0, 0, width, height);
    pdf.text(`Reviewed By Analyst : ${user} on ${new Date().toLocaleString()}`, 450, 35);
    pdf.setFontSize(16);
    pdf.text("Powered By ", width - 500, height - 20)
    loadImage(solytics).then((logo1) => {
      pdf.addImage(logo1, "png", width - 425, height - 35, 90, 25);

    });

    loadImage(banklogo).then((logo) => {
      pdf.addImage(logo, "png", 15, 0, 85, 55);

      pdf.save(`${name}.pdf`);

    });


  });
};

【问题讨论】：

标签： javascript html reactjs jspdf

【解决方案1】：

这是可能的，但有点棘手，您可以将 Y 坐标减去user 长度。例如，如果我将字体大小设置为 12：

const user="ihsan fajar ramadhan"
doc.setFontSize(12);
doc.text(`Reviewed By Analyst : ${user} on ${new Date().toLocaleString()}`, 105 - user.length*2.1, 25);

文本的 Y 坐标将遵循user 的长度，因此不会超出页面。但是这个例子中的方程并不完美，我建议你做一个图表（用excel什么的）并生成趋势线以获得最理想的方程。

【讨论】：