从动态创建的表（div）创建多页PDF，该表大于单个页面

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.

我使用php和mysql动态创建一个包含div的表，然后使用jsPDF打印它。这一切都很好，直到桌子超过一页。然后，我得到的只是第一页。我花了几周，几个小时的阅读，尝试和测试，只是不能让它打印超过第一页。

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.

我已经尝试使用@page with page-break-inside：auto但它不会创建分页符。谢谢你的帮助。

1 个解决方案

#1

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

为了解决您的问题，我知道有两种方法 -

Providing options to the page to split

提供要拆分的页面选项

options = { pagesplit: true };

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.

请注意，这可能会严重分割您的表（尝试它并且您将看到） - 您可以做的一件事是在行之间添加空格，在打印页面之前将其拆分为pdf。发生这种情况是因为fromHTML（）将表转换为画布，然后根据pdf的页面大小拆分画布。

Using a plugin like this - https://github.com/Prashanth-Nelli/jsPdfTablePlugin
使用这样的插件 - 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!

希望这可以帮助！

#1