jsPDF and React- Content Zoomed

[sanishtjppi]

Hi,

Loved the whole idea of this library and thank you for creating such an awesome job. I am trying to replace my Puppeteer-based server-side PDF generation with jsPDF. I have several react apps which creates HTML report and print that as PDF.

When I use the html() method, the content is always zoomed for some reason. I thought it's something with my code, so I created a clean slate CRA project and tried the html() option. The result was the same. Everything is rendered as I wanted, but all are zoomed big to another level. Content will clip because of this.

Any idea why this might be happening?

I am just using the most basic jsPDF code,

const doc = new jsPDF();
      doc.html(document.body, {
        callback: function (doc) {
          doc.save();
        },        
      });

I am using "jspdf": "^2.3.1" "react": "^17.0.2". All latest as I am writing this.

Update:

Using html2canvas with a very low scale gives better results. Not sure whether it's a the right way to deal with it.

  const doc = new jsPDF();
  
    doc.html(document.body, {
      callback: function (doc) {
        doc.save();
      },      
      html2canvas:{scale:0.1}
    });

[sanishtjppi]

I ended up with my updated solution. Below is a code that works great for me. Need to do a lot more testing but it works well on at least one report with several pages and images and css. I kept the scale option to .25 and adjusted the width and height of each page content and got nice results. I hope someone confirms that this is the right way.

const doc = new jsPDF();
      doc.html(html, {
        callback: function (doc) {
          doc.save();
          setMode("html");
        },
        x: 0,
        y: 0,
        html2canvas: { scale: 0.25 },
      });

[HackbrettXXX]

What also might help is new jsPDF({ unit: 'pt' })