How to add html content to each page of jsPDF?

Question

I am trying to convert my html page to pdf using jsPDF. Essentially i am using the html method of jsPDF, giving it a source, and options and then in the callback function i would save the document. But i am having a problem when it comes to dividing the single html document into mulitple divs and saving each div in a page. I am trying the below code and it renders all the pages blank.

My html looks like

<div class = "resultpage" >
  <div class = "print-section-1">
     //some content
  </div>
  <div class = "print-section-2">
     //some content again
  </div>
  <div class = "print-section-3">
     //content...
  </div>
</div>

My js looks like :

window.jsPDF = window.jspdf.jsPDF;
let doc = new jsPDF({
                    orientation : "portrait",
                    unit : 'px',
                    format : 'a4',
                    hotfixes : ["px_scaling"],
                    putOnlyUsedFonts : true
                })
 doc.html($(".prints-section-1")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
  })
 doc.addPage()
doc.html($(".print-section-2")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.addPage()
doc.html($(".print-section-3")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.save("test")

This renders all the pages empty.

If i modify the js, to have a chaining of callbacks like below, i am able to get the last div (print-side-2 in this case) printed but the pages previous to it are blank.

doc.html($(".print-section-1")[0], {
            callback : function(doc) {
              doc.addPage();
              doc.html($(".print-section-2")[0], {
                 callback : function(doc) {
                    doc.save("test.pdf")
                  }
                 x: 10,
                 y : 10,
                margin : [50, 200, 50, 200],
                autoPaging : "text"
              })
            }
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })

Can anyone point out what i am doing wrong ? I searched for solutions but many use deprecated methods like addFromHTtml, and some suggested using line breaks like "<!--ADD_PAGE>" _ and style = "page-break-before : always" but both don't work. I looked into the documentation and it hasn't been great support. Please help me.

score 2 · Answer 1 · answered Nov 28 '22 at 02:02

Referencing this answer (refrencing)

Just use await and make sure to return doc inside the callback

something like this

var doc = new jspdf.jsPDF({
  orientation: 'p',
  unit: 'pt',
  format: 'letter'
});


var field = "<b>html test </b>";
doc.text(10, 10, "test");
//add first html
await doc.html(field, {
  callback: function (doc) {
    return doc;
  },
  width: 210,
  windowWidth: 210, 
      html2canvas: {
          backgroundColor: 'lightyellow',
          width: 210, 
          height: 150
      },
      backgroundColor: 'lightblue', 
  x: 10,
  y: 50,
  autoPaging: 'text'
});
window.open(doc.output('bloburl'));

now you can call doc.html as many times as you want for that same document

Originally posted by @bakuur in https://github.com/parallax/jsPDF/issues/3074#issuecomment-1328427528

How to add html content to each page of jsPDF?

1 Answers1