CODEWITHSUNDEEP
phpjquerymysqlcssjspdf
Wasskinny
Wasskinny

Reputation: 77

Create a multi page PDF from a dynamically created table (div) that is bigger than a single page

I am dynamically creating a table using php and mysql into a containing div and then I print it using jsPDF. Its all good until the table exceeds a single page. Then all I get is the first page. I have spent weeks, hours of reading, trying and testing and just can't get it to print more than the first page.

Here's what I have:

<!-- jsPDF Scripts -->
<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="//html2canvas.hertzen.com/build/html2canvas.js"></script>

$(document).ready(function() {

        $("#pdfDiv").click(function() {

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


            pdf.addHTML($('#rentalListCan').first(), function() {
                pdf.save("rentals.pdf");
            });
        });
    });

I have tried printing the page directly but the formatting doesn't hold.

I have tried css using @page with page-break-inside: auto but it doesn't create the page breaks. Thanks for your help.

Upvotes: 1

Views: 2958

Answers (2)

AYESHA JAVED
AYESHA JAVED

Reputation: 89

Here is the simple solution of my this problem in php codeigniter.

1-Add Script after <head> tag:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

2-Add <a href></a> tag call the function > generatePdf

<a href="javascript:generatePDF()">Dowload PDF</a></div>

3-set div with dynamic id's

<div id="html2pdf_<?php echo  $reg['id']; ?>">

4-start a <script> define fuction generatePdf

<script>   
function generatePDF() {}
</script>

5-create doc new jspdf

var doc = new jsPDF();

6-define page height and x,y coordinates

pageHeight= doc.internal.pageSize.height;
        x=15; y = 0 ;

7-call the div tag by user id dynamically where instruction populate from db :

<?php foreach($registration as $reg){?>
doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
'width': 170
 }),
<?php } ?>

8-Save the doc in Download Folder

doc.save("CallLetters.pdf");

9- Now add the multiple pages in one pdf:

if (y >= pageHeight)
{
doc.addPage();
}

10- Complete Code:

<script>   
function generatePDF() {
        var doc = new jsPDF();
        pageHeight= doc.internal.pageSize.height;
        x=15; y = 0 ;
<?php foreach($registration as $reg){?>
if (y >= pageHeight)
{
doc.addPage();
y = 0 
doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
'width': 170
 }),
y=500;
}
else{
doc.fromHTML(document.getElementById("html2pdf_<?php echo  $reg['id']; ?>"),x,y,{
'width': 170
}),
y=500;
}<?php } ?>
doc.save("CallLetters.pdf");         
}
</script>

Upvotes: 0

prad
prad

Reputation: 1156

To solve your problem, there are two approaches that I am aware of -

  1. Providing options to the page to split

    options = { pagesplit: true };

    And then - 

    pdf.addHTML($('#someDiv'), marginX,  marginY, options, function() {
    pdf.save("doc.pdf");
});

Note that this can split your table badly (try it and u'll see)- one thing you can do is add blank space between the rows which get split just before printing the page as pdf. This happens because fromHTML() converts the table into canvas and then splits the canvas as per page size of the pdf.

  1. Using a plugin like this - https://github.com/Prashanth-Nelli/jsPdfTablePlugin

But customizing the table in style is not supported here yet. But you can customize the font and colors. If you table is simple enough, it is a great and easy to use plugin.

Hope this helps!

Upvotes: 1

Related Questions