Jspdf: JSPDF - Page Split breaks the content after it's page size exceeds

[Chirag489]

I am using jsPDF in my application to generate PDFs. SO I am converting whole web page which contains multiple tables and icons to PDF.

PFB my js Code

 function demoFromHTML() {

          var pdf = new jsPDF('p','pt','a4');

     pdf.addHTML(document.body,{pagesplit:true},function() {
              pdf.save('Test.pdf');
          }); document.getElementById('buttons').style.visibility = 'hidden';

}

And my webpage contains some simple HTML table as well as some Datatable which looks like this

<h:dataTable value="#{bean.entries}" var="entry"> <h:column>
<f:facet name="header">
    <h:outputText value="UserId" />
</f:facet>
<h:outputText value="#{entry.key}" /></h:column>

So if the size of the table exceeds page limit, it breaks the table from middle and display the remaining content in the next page. In fact one row of the table is broken into two parts, upper part of the broken row is displayed as last row in first page and the lower part of the broken row as first row in the next page. Kindly help me in this

[trilokajency]

I know its very late to add the comment now.
but if any 1 comes across this issue can use the following.

pdf.addHtml doesnot work if there are svg images on the web page.. I copy the solution here: // suppose your picture is already in a canvas var imgData = canvas.toDataURL('image/png'); /* Here are the numbers (paper width and height) that I found to work. It still creates a little overlap part between the pages, but good enough for me. if you can find an official number from jsPDF, use them.

`var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

enter code here

var doc = new jsPDF('p', 'mm');
var position = 0;

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');`

[maddyjolly2112]

I tried this one but it is giving 82 MB file in my case , also the data coming is blurred.
For SVG images you can convert SVG to canvas using https://github.com/gabelerner/canvg
After that you can convert div to pdf .

P.S : The data still breaks but you will have less MB file with less blurness in the data

[MrRio]

Hi there,

There's now a html2pdf example which much better supports generating documents from HTML.

There are also SVG examples.

Get the latest master and try:

npm install
npm start

Then visit localhost:8000/examples/html2pdf/showcase.html

Hope this works well for you :)

Many thanks,
James

[maddyjolly2112]

Thanks @MrRio .. i tried with html2pdf with pdfmake and then wrote custom code for handling SVG. It worked !!

[MrRio]

Great :)
On Fri, 30 Sep 2016 at 08:28, maddyjolly2112 [email protected]
wrote:

Thanks @MrRio https://github.com/MrRio .. i tried with html2pdf and
then wrote custom code for handling SVG. It worked !!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/MrRio/jsPDF/issues/650#issuecomment-250678422, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAC5s3N3RhPFmEnxnh9INknzhQIvibJaks5qvLoFgaJpZM4G2ec3
.

James Hall
Director
Parallax Agency Ltd
M. 07894950320

[shalini-github]

html2pdf - generated pdf not opening in adobe reader. pls help

[gbluv]

This example shows only one page, is there example with more then one page rendered?

https://cdn.rawgit.com/MrRio/jsPDF/master/examples/html2pdf/showcase_supported_html.html

Thanks

[Uzlopak]

try #1450

[juanktigre]

I made this for Angular 7 CLI with html2canvas and jspdf
createpdf() {
var data = document.getElementById('content');
var date = new Date();
html2canvas(data).then(canvas => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

  var doc = new jspdf('p', 'mm');
  var position = 0;

  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+15);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }

doc.save ('Visiometria_'+this.id+ '_'+date.getTime()+'.pdf')

});

}

[anilkaw]

thank you very much , it worked..

[ali-husnain-brainx]

This is working for me.

      var imgData = canvas.toDataURL('image/png');
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm', "a4");
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+10);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
          position = heightLeft - imgHeight;
          doc.addPage();
          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+10);
          heightLeft -= pageHeight;
      }
    doc.save("Dashboard.pdf");

[victormsti]

I made this for Angular 7 CLI with html2canvas and jspdf
createpdf() {
var data = document.getElementById('content');
var date = new Date();
html2canvas(data).then(canvas => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

  var doc = new jspdf('p', 'mm');
  var position = 0;

  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+15);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }

doc.save ('Visiometria_'+this.id+ '_'+date.getTime()+'.pdf')

});

}

Worked for me! Thanks!

[Mitrr]

Adding 15(or any num) not quite correct, because you dont change heightLeft. With this decision content on last page may not fit in last page, and new page will not be created, because heightLeft is already < 0

I made this for Angular 7 CLI with html2canvas and jspdf
createpdf() {
var data = document.getElementById('content');
var date = new Date();
html2canvas(data).then(canvas => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

  //enter code here
  const imgData = canvas.toDataURL('image/png')

  var doc = new jspdf('p', 'mm');
  var position = 0;

  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+15);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
    heightLeft -= pageHeight;
  }

doc.save ('Visiometria_'+this.id+ '_'+date.getTime()+'.pdf')

});

}

[pawantiwari1]

I have facing issue if the zoom size increase/decrease
If I decrease browser zoom as 80% then content is breaking in next page
const imgData = canvas.toDataURL('image/png')
var doc = new jspdf('p', 'mm');
var position = 0;

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight+25);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 25);
heightLeft -= pageHeight;
}