canvas2html and jsPDF - file is too much zoomed when it is exported

Question

I am using html2canvas and jsPDF to export my page to PDF document. As the page has long content I am using this code to create it:

const onExportClick = (e) => {
   e.preventDefault();
   const quotes = document.body;
   html2canvas(quotes).then(
      (canvas) => {
         //! MAKE YOUR PDF
         const pdf = new jsPDF("p", "pt", "A4");

         for (let i = 0; i <= quotes.clientHeight / 980; i++) {
            //! This is all just html2canvas stuff
            const srcImg = canvas;
            const sX = 0;
            const sY = 980 * i; // start 980 pixels down for every new page
            const sWidth = 900;
            const sHeight = 980;
            const dX = 0;
            const dY = 0;
            const dWidth = 900;
            const dHeight = 980;

            const onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute("width", 900);
            onePageCanvas.setAttribute("height", 980);
            const ctx = onePageCanvas.getContext("2d");
            // details on this usage of this function:
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(
               srcImg,
               sX,
               sY,
               sWidth,
               sHeight,
               dX,
               dY,
               dWidth,
               dHeight
            );

            // document.body.appendChild(canvas);
            const canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            const width = onePageCanvas.width;
            const height = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
               pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i + 1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, "PNG", 0, 0, width, height);
         }
         //! after the for loop is finished running, we save the pdf.
         pdf.save("Test.pdf");
      }
   );
};

The problem is that document looks like this (for example first 2 pages from PDF):

In the website it is like this (stuff from first 2 pages from PDF):

So basically it's kind of zoomed too much. How can I make it fit to PDF page?

Answer 1

You have initialized the jsPDF to use 'pt' as default

const pdf = new jsPDF("p", "pt", "A4");

But the image that you get is in pixel. And the below line of code treats the width and heights as pt(points)

pdf.addImage(canvasDataURL, "PNG", 0, 0, width, height);

1 Point = 1.333333 Pixel
1 px =   0.75 point

Hopefully this should do the trick:

pdf.addImage(canvasDataURL, "PNG", 0, 0, width * 0.75, height * 0.75);

So in your case the image is getting bigger. What you have to do is just multiply your width/height( which is in pixel ) by 0.75 to get the dimension in points. You should also factor in the additional margins that you give around the image and make sure to subtract the same and convert that number to pixel else the image might look cropped.

API Reference: https://artskydj.github.io/jsPDF/docs/module-addImage.html#~addImage

Parameters:

width   number  
width of the image (in units declared at inception of PDF document)

height  number  
height of the Image (in units declared at inception of PDF document)

This is what I feel is the problem. Maybe you can give it a try. Hope it helps!