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

Question

I have multiple types of data images of different sizes (height & width) that need to be converted to PDF using jspdf,html2canvas but I have trouble when I download pdf its works for small name user data but when I get a big name or other data then in right side it's got increase and go out of the page like distorted it's working if the user name is small and less data but when data get its go out of the page from X side I tried scrollX: 0 and scrollX: -window.scrollX both but not getting in proper see the image below the data number getting out and how can I improve PDF quality. ?

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`);

    });


  });
};

Answer 1

this is possible but a bit tricky, you can substract the Y coordinate by user length. For the example if I set the font size to 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);

the Y coordinate of the text will follow the user length so it will not go out of the page. but the equation is not perfect in that example, I suggest you to make a graph (with excel or something) and generate the trendline to get the most desirable equation.