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

See original GitHub issue

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

Issue Analytics

State:
Created 8 years ago
Comments:23 (2 by maintainers)

Top GitHub Comments

28reactions

trilokajencycommented, Aug 12, 2016

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’);`

15reactions

juanktigrecommented, May 19, 2019

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’)