使用HTML2CANVAS和JSPDF生成PDF文件

由于TCPDF失败，转而使用本方案，目前已经可以成功生成PDF，但是还有一些坑要解决。

几个遇到的坑：

网上有些js云链接是无效的，注意测试，或者直接下载回来
一开始图片不能包含所有页面内容，后来添加了width和height参数得以解决
最大的问题还是图片不清晰的问题，这个后面有时间再试试吧

初步代码如下：

<meta charset="utf-8">
<div id="export_content">
    这里是要导出为pdf中的内容
</div>
<button id="exportToPdf">导出为PDF</button>

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript">

    document.getElementById("exportToPdf").onclick = function () {
        html2canvas(
                document.getElementById("export_content"),
                {
                    background: "#fff",
                    dpi: 600,//导出pdf清晰度
                    x: 0,
                    y: 0,
                    width: 1200,
                    height: 800,
                    scale: 2,
                    onrendered: function (canvas) {
                        var contentWidth = canvas.width;
                        var contentHeight = canvas.height;
                        //一页pdf显示html页面生成的canvas高度;

                        var pageHeight = contentWidth / 592.28 * 841.89;
                        //未生成pdf的html页面高度

                        var leftHeight = contentHeight;
                        //pdf页面偏移

                        var position = 0;
                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）

                        var imgWidth = 820;
                        var imgHeight = 820 / contentWidth * contentHeight;
                        var pageData = canvas.toDataURL('image/jpeg', 1.0);
                        var pdf = new jsPDF('l', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页

                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                        } else {
                            while (leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save('content.pdf');
                    }
                })
    }
</script>

发表评论