PDF content is out of scale in Chrome print preview when rendering canvas into jsPDF doc

[mreactdev]

Greetings,

I am experiencing an issue when viewing the Print Preview for a generated PDF in Chrome. I am using the following code to render an html canvas and generate an image to insert into a new PDF document using the .addImage() function, and outputing a data uri string which I'm using in an html element to display the document:

 let img = canvas.toDataURL('image/jpeg')
 // ^outputs a valid image url with document content scaled correctly on canvas element
 let doc = new jsPDF('p', 'px', [canvas.width, canvas.height])
doc.addImage({ imageData: img, format: 'JPEG', x: 0, y: 0, width: canvas.width, height: canvas.height })
let base64 = doc.output('datauristring')

The generated base64 passed to the window scales the document fine and the document appears normal:

However, when attempting to print with "Default" scale settings enabled, the document appears out of scale in the preview window:

Setting the print destination to Save as PDF does not have this issue, and setting the Scale manually to "Fit to Printable Area" and "Fit to Page" also do not print out of scale.

Has anyone else experienced this issue? Or have any idea what may be causing this?

[mreactdev]

Anyone have any insight into this issue?

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[warmwhisky]

This is exactly what my pages have looked like out of the box. I cannot figure out how to scale it so I can state correct values.

I hacked and hacked with strange numbers until I got something that worked, but it still twice the size of A4. Though it does work very well with already calculated pages.

  // Initialize the PDF document
  let doc = new jsPDF('p', 'px', [1186, 840]);

  // Get an array of all the page elements you want to include
  let pageElements = document.querySelectorAll('.invoice_page'); 

  // Define the function to render each page
  function renderPage(index) {
      if (index < pageElements.length) {
          let pageElement = pageElements[index];
          // hack to omit the first page which is always blank
          if (index > 0) {
              doc.addPage();
          }
          // Add the current page element to the PDF
          doc.html(pageElement, {
              callback: function () {
                  // Render the next page when this one is done
                  renderPage(index + 1);
              },
              x: 0,
              y: 0,
              autoPaging: false,
          });
      } else {
          // Save the PDF when all pages are rendered
          doc.save("pdf-filename.pdf");
      }
  }
// render the PDF
renderPage(0);

[warmwhisky]

I fix this from this comment #3545 (comment) specifically setting width and windowWidth

doc.html(elementHTML, {
    callback: () => {
        doc.save("doc.pdf");
    },
    width: 211,
    windowWidth: 800,
    margin: [15, 10, 10, 10],
});