前言：最近项目中有将html文件导出PDF需求，了解网上有jspdf，whtmltopdf等方法。
由于whtmltopdf需要在服务端安装whtmltopdf，为了简便，选择了js方法。
需要插件：
<script src="/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="{{asset('js/canvas2image.js')}}"></script>
猜到的坑：jspdf导出文件的原理就是使用canvas截取html文档，在把图片插入到PDF文件之中。由于项目中内容偏多，出现了：截取内容不全的问题，分页后文字，图片被截断问题。
解决方法：网上的解决方法有很多，但是对我有效的却不多。
经过多次尝试，终于让我尝试出来一个行之有效的方法，废话不多说，附上代码：function exportReportTemplet() {var element = $("#exportPdf"); // 这个dom元素是要导出pdf的div容器var w = element.width() + 30; // 获得该容器的宽var h = element.height() + 30; // 获得该容器的高var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");canvas.width = w * 2; // 将画布宽&&高放大两倍canvas.height = h * 2;var context = canvas.getContext("2d");var scale = 2;//清晰度context.scale(2, 2);context.translate(-offsetLeft, -offsetTop);html2canvas(element, {background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑scale: scale,canvas: canvas,width: w,height: h,useCORS: true,onrendered: function (canvas) {//未生成pdf的html页面高度var leftHeight = canvas.height;var a4Width = 595.28;var a4Height = 841.89;//一页pdf显示html页面生成的canvas高度;var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);//pdf页面偏移var position = 0;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('x', 'pt', 'a4');var index = 1,canvas1 = document.createElement('canvas'),height;pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');var pdfName = "xx.pdf";//文件名function createImpl(canvas) {if (leftHeight > 0) {index++;var checkCount = 0;if (leftHeight > a4HeightRef) {var i = position + a4HeightRef;for (i = position + a4HeightRef; i >= position; i--) {var isWrite = truefor (var j = 0; j < canvas.width; j++) {var c = canvas.getContext('2d').getImageData(j, i, 1, 1).dataif (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {isWrite = falsebreak}}if (isWrite) {checkCount++if (checkCount >= 10) {break}} else {checkCount = 0}}height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);if (height <= 0) {height = a4HeightRef;}} else {height = leftHeight;}canvas1.width = canvas.width;canvas1.height = height;// console.log(index, 'height:', height, 'pos', position);var ctx = canvas1.getContext('2d');ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);var pageHeight = Math.round(a4Width / canvas.width * height);// pdf.setPageSize(null, pageHeight)if (position != 0) {pdf.addPage();}pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4Width, a4Width / canvas1.width * height);leftHeight -= height;position += height;$('.pdfProgress').text(index + 1);$('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));if (leftHeight > 0) {setTimeout(createImpl, 500, canvas);} else {pdf.save(pdfName + '.pdf');$('.pdfTip').remove();}}}//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < a4HeightRef) {pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);pdf.save(pdfName + '.pdf');} else {try {//pdf.deletePage(0);$('.pdfTip').show();$('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));setTimeout(createImpl, 500, canvas);} catch (err) {console.log(err);}}showloading(false);}});}
