Search code examples
pdfpdf-generationjspdf

JSPDF .html() function returning blank pdf page


Using the new jsPDF .html() pretty much pulled straight from their docs, but it still results in a blank page:

Results in blank page:

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc.innerHTML, {
           callback: function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

Results in no PDF generated:

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc.innerHTML, {
           function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

Also results in blank page:

function saveDoc() {
  window.html2canvas = html2canvas
  const doc = document.getElementById('doc')

  if (doc) {

        var pdf = new jsPDF('p', 'pt', 'a4')
        pdf.html(doc, {
           callback: function (pdf) {
             pdf.save('DOC.pdf');
           }
        })
  }
}

Will use another tool if there are any other suggestions. Need it to be secure and generate selectable text PDF to keep overall size down. It's a long document it's generating and when doing it via addImage() the resulting file is huge. Thoughts?


Solution

  • After trying whole day came with following solution. I think we are getting blank page because of versions of html2canvas. I was using updated jspdf(1.5.3) with html2canvas(1.0.0-rc.3). Due to this I was getting blank pdf. When I use html2canvas(1.0.0-alpha.12) with jspdf(1.5.3) I am getting pdf with contents(not blank). So better to change version of html2canvas in order to work with newly .html() method.

     // scripts included
     <script type="text/javascript" src="html2canvas.js"></script> // 1.0.0-alpha.12 downloaded
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
    
    //html  
    <div id='doc'>
        <p>Hello world</p>
        <div class="first-page">
            <h1>bond</h1>
            <img src="1.png"/>
        </div>
        <div class="second-page">
            <img src="2.png"/>
        </div>
    </div>
    <button onclick="saveDoc()">click</button>
    
    // javascript
    
     <script type="text/javascript">
        var pdf = new jsPDF('p', 'pt', 'a4');
    
        function saveDoc() {
            window.html2canvas = html2canvas
            const doc = document.getElementsByTagName('div')[0];
    
            if (doc) {
                console.log("div is ");
                console.log(doc);
                console.log("hellowww");
    
    
    
                pdf.html(document.getElementById('doc'), {
                    callback: function (pdf) {
                        pdf.save('DOC.pdf');
                    }
                })
           }
         }
       </script>
    

    html2canvas 1.0.0 alpha.12

    .html() not working github