'jspdf version 1.4 .html() img inside canvas is full size instead of styled width/height

So after searching I haven't found specific answer to my issue.

I'm using the new JSPDF version that uses .html(element, options) format... which uses html2canvas/dompurifier built in, so I don't have to pass an html2canvas and .addImage(canvas) to get it to pdf...

I'm passing a "container" div into jspdf, and it is rendering, but I have an image element within the container div. on my life page, it is sized to fit within it's wrapping div element, however in the pdf, it's full size and is running off the size of the page. Elements after the img tag are on the next line and are showing appropriately.

container div, planning on having the printoutHeader be on top of every page of PDF

<style>  #mainLogo img {
    height: auto;
    width: 100%;
    max-width: 100px;
  }</style>
    <div class="printOut page1">
      <div class="printoutHeader ui huge top fixed menu borderless">
        <div class="item" id="mainLogo">
          <img src=''> <!-- I have the img base64 Encoded here -->
        </div>

        <div class="item">
          <div class="item headerDetails">
          Generic Header Information here
          </div>
        </div>

JS Executed:

function export_to_pdf(element) {
  var pdf = new jsPDF();
  pdf.html(element, {
    autoPaging: 'text',
    callback: function(pdf) {
      var iframe = document.createElement('iframe');
      iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
      document.body.appendChild(iframe);
      iframe.src = pdf.output('datauristring');
    }
  });
}

export_to_pdf(document.getElementsByClassName('printOut')[0]);

Hope is that I could eventually run something like a forEach of the elements, have them add a page to PDF, save PDF from there.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source