Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 237
user2521295 Avatar asked Aug 06 '19 12:08

user2521295


2 Answers

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

like image 80
PALLAMOLLA SAI Avatar answered Oct 20 '22 15:10

PALLAMOLLA SAI


For me the working solution was to add the callback/promise behavior --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); Seems that html() method works async and the file to be downloaded was not ready when downloading based on the other example --- that's why it was empty.

like image 7
Andrei Tudose Avatar answered Oct 20 '22 13:10

Andrei Tudose