html2canvas+jspdf：通过js将html页面转pdf

Html To Pdf

最近项目中有将报告页面转成pdf的需求，为了方便，想在js中转化，然后找了一下，发现html2canvas好像满足这个需求，尝试了一下，基本上能实现html转pdf。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="~/Content/js/html2canvas.js"></script>
<script>
    var downPdf = document.getElementById("exportToPdf"); // 转换按钮
    downPdf.onclick = function () {
        // 要导出pdf的节点
        var elements = document.getElementsByClassName("pdf_page"); // 需要转换的页面节点
        var imgMap = new Map();
        for (var index = 0; index < elements.length; index++) {
            var mapIndex = index;
            html2canvas(elements[index], {
                useCORS: true, // 是否允许网页中img元素跨域，这个设置需要img元素支持及服务器支持
                scale: 2, // 这个影响生成图片的清晰度
                background: "#F5F5F5" //背景
            }).then((canvas) => {
                var img = new Image();
                img.width = canvas.width;
                img.height = canvas.height;
                img.src = canvas.toDataURL('image/jpeg', 1.0);
                imgMap.set(mapIndex, img); // 按照顺序保存图片

                if(imgMap.size == elements.length) { // 当所有图片都转化完毕，则进行保存操作
                    var pdf = new jsPDF('', 'pt', 'a4');
                    for(var i = 0; i < imgMap.size; i++) {
                        // canvas尺寸
                        var canvasWidth = imgMap.get(i).width;
                        var canvasHeight = imgMap.get(i).height;
                        var pageData = imgMap.get(i).src;
                        addOneImg(pdf, pageData, canvasWidth, canvasHeight);
                        if(i < imgMap.size-1) {
                            pdf.addPage(); // 如果还有图片未添加到pdf,则增加一个页面
                        }
                    }
                    // 所有图片添加完毕，保存
                    pdf.save("report_"+checkId+".pdf");
                }
            });

        };
    }
    // img转化为pdf并保存
    var addOneImg = function (pdf, pageData, canvasWidth, canvasHeight) {

        // a4纸的尺寸[595.28,841.89]
        var a4Width = 595.28;
        var a4Height = 841.89;

        //html页面生成的canvas在pdf中图片的宽高
        var imgWidth = a4Width;
        var imgHeight = a4Width / canvasWidth * canvasHeight;

        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = canvasWidth / a4Width * a4Height;

        addPages(pdf, pageData, 0, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);


    }

    // 递归的方式对页面进行截取并添加到pdf中
    var addPages = function (pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        // 减去已经绘制的区域
        canvasHeight -= pageHeight;
        position -= a4Height;
        // 当还有内容未生成pdf，则新加页面，并添加图片
        if (canvasHeight > 0) {
            pdf.addPage();
            addPages(pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);
        }
    }
</script>

上述代码能满足html转pdf，但是转换后的pdf并不能非常好的满足我的其他需求，所以最终放弃这一方案了，但还是记录下来，可能以后会用得到。

下面来说下这个方案的优缺点：

优点：

1. js方法转换，在浏览器可以直接将已经生成后的html页面整体转换为pdf

2. 生成的效果与网页预览一致

缺点：

1. 分页，因为是html转canvas，所以分页的时候需要特别注意，页面元素设置不合理会导致一行字被分到两页中

2. 图片跨域时，需要后台配置支持跨域才可以生成到pdf中

总之，如果只是简单的生成pdf保存下来，这个方案很不错，但是如果需要分页及打印，则还是由后台生成会比较好（如 office等方案）