这两天说要做一个流程表单的导出功能，所以就想到这个，直接导出为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');*/});},
