使用jspdf和html2canvas实现动态HTML的多个pdf页面

Question

我得到了这个模板，现在正在尝试使用jspdf和html2canvas将其制作成PDF文档。

<div id="tre" class="letter-content">
    <h5><b>My tittle</b></h5>
    <br>
    <p>My text here
    </p>
    <ul>
        {% for function in functions %}
            <li>
                <p>{{ function.description }}</p>
            </li>
        {% endfor %}
    </ul>

</div>

这个生成PDF的脚本如下：

    function getPDF(){
        var HTML_Width = 1024;
        var HTML_Height = 768;
        var PDF_Width = 1024
        var PDF_Height = 768
        var canvas_image_width = 1050;
        var canvas_image_height = 950;

        html2canvas(document.getElementById("tre"),{ allowTaint:true}).then(function(canvas) {

            var imgData = canvas.toDataURL("image/jpg", 1);
            var pdf = new jsPDF('p', 'px', [PDF_Height, PDF_Width]);
            pdf.addImage(imgData, 'JPEG', 20, 0, canvas_image_width,canvas_image_height);
            pdf.save("Certificate.pdf");
        });
    }

但是，正如您在模板上所看到的那样，“for”语句可能会为一个记录或多个记录创建html。当它渲染多次迭代时，jspdf总是只获取一页，剪切了其余的页面。我该如何让它创建所需的所有页面？

提前感谢！

- jsanchezs

---

这个回答解决了你的问题吗？如何使用Angular 7生成PDF？ - William Prigol Lopes

Answer 1

可以使用jspdf生成多页pdf。请参考此链接https://dev59.com/GlQI5IYBdhLWcg3w5gDJ#59320184。

- Lincy PJ