Javascript 将html转成pdf，可以下载，支持多页（html2canvas 和 jsPDF）

最近项目碰到一个需求，将一个表格生成一份报告，故而想到将表格导出为pdf文件。此功能用到了jspdf和html2canvas两个开源插件，可以 npm 直接拉取，不多说，代码如下：

在获取到页面截取的base64位的长长图片之后，添加到pdf中。

        $("#downpdf").on("click", function() {
            //获取节点高度，后面为克隆节点设置高度。
            var height = $(TargetNode).height()
            //克隆节点，默认为false，不复制方法属性，为true是全部复制。
            var cloneDom = $(TargetNode).clone(true);
            //设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
            cloneDom.css({
                "background-color": "white",
                "position": "absolute",
                "top": "0px",
                "z-index": "-1",
                "height": height
            });
            //将克隆节点动态追加到body后面。
            $("body").append(cloneDom);
            //插件生成base64img图片。
            html2canvas(cloneDom, {
                //Whether to allow cross-origin images to taint the canvas
                allowTaint: true,
                //Whether to test each image if it taints the canvas before drawing them
                taintTest: false,
                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;
                    //页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    //注①
                    var pdf = new jsPDF('', 'pt', 'a4');
                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if(leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth,imgHeight);
                    } else {
                        while(leftHeight > 0) {
                            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                            pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                //注②
                                pdf.addPage();
                            }
                        }
                    }

                    pdf.save('name_hos.pdf');
                }
            });
        })

这种方式导出的pdf文件可以分页，也支持中文，但是有几个缺点：

1. 导出的pdf文件过大，十页的话就要好几兆
2. 生成pdf为图片形式，显示不清晰、失真

还有很多其他的导出pdf的方法，这里不多赘述，下次更新。。。
参考文章：html页面导出为pdf（jsPDF、iText、wkhtmltopdf）