利用jsPDF和html2canvas前端实现页面PDF多页导出

这两天说要做一个流程表单的导出功能，所以就想到这个，直接导出为PDF形式：
其本质主要是利用页面偏移量position，canvas的待导出的整体高度leftHeight和通过一页pdf显示html页面生成的canvas高度pageHeight。
首先因为我们导出采用的是a4纸的形式，尺寸为595.28 * 841.89。我们可以相应计算出宽高比例，然后根据canvas的宽度，得到等比缩放后的高度，然后得到一页的pdf需要高度为
canvas.width/ 592.28 * 841.89，然后利用canvas.height整体高度逐步减去每一页的高度，显示多页面导出。直接上代码吧：

//addby guisc25848  通过高度动态的方式实现连续多页下载,但是如果页数过长，则会下载过慢，目前系统一般最多两页，所以影响可以忽略
        exportToPdf : function () {
            var tpaId = this.id.substr(0, this.id.length - 10);
            document.getElementById(tpaId + "-content").scrollTop = 0;
            var dom = $("#" + tpaId + "-content .colRoport  .angular.clearfix.ng-scope")[0];
            var _self = this;
            html2canvas(dom,{
              logging:false,
              background:'#fff',
              allowTaint: true,
              taintTest: false,
              height: dom.scrollHeight + 10,//
              width: dom.scrollWidth,//
              async:false
            }).then(function(canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                console.log('contentWidth', contentWidth);
                console.log('contentHeight', contentHeight);
                
                //一页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('流程表单信息.pdf');
                // 将canvas转为base64图片
                /*var pageData = canvas.toDataURL('image/jpeg', 1.0)
                var pdf = new jsPDF('', 'pt', 'a4');
                pdf.addImage(pageData, 'jpeg', 0, 0, 595.28, 592.28/canvas.width * canvas.height);
                pdf.save('流程表单信息.pdf');*/
            });
        },