使用html2canvas+jspdf导出iframe内容到pdf文件

工具如下： html2canvas.js html2canvas.min.js jspdf.debug.js 代码如下：

<script> // 生成canvas并导出pdf文件 function exportPdf() { var dom = document.getElementById('iframeId').contentWindow.document.documentElement; html2canvas(dom, { background: "#FFFFFF",// 如果指定的div没有设置背景色会默认成黑色,这里是个坑 // useCORS: true, onrendered:function(canvas) { // 未生成pdf的html页面高度 var leftHeight = canvas.height; var a4Width = 595.28-56.69 var a4Height = 841.89-56.69 // 一页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='文件名称'; var num = 0; 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 = true for (var j = 0; j < canvas.width; j++) { var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) { isWrite = false break } } 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', 28.345, 28.345, a4Width, a4Width / canvas1.width * height); leftHeight -= height; position += height; if (leftHeight > 0) { setTimeout(createImpl, 500, canvas); } else { pdf.save(pdfName + '.pdf'); } } } // 当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < a4HeightRef) { pdf.addImage(pageData, 'JPEG', 28.345, 28.345, a4Width, a4Width / canvas.width * leftHeight); pdf.save(pdfName + '.pdf'); } else { try { pdf.deletePage(0); setTimeout(createImpl, 500, canvas); } catch (err) { console.log(err); } } } }) } </script>

注意：生成canvas的dom元素应为iframe中的页面元素，即：

var dom = document.getElementById('iframeId').contentWindow.document.documentElement;