使用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.69var 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 = 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', 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;

使用html2canvas+jspdf导出iframe内容到pdf文件相关推荐

html2Canvas+JsPDF 导出pdf 无法显示网络图片
html2Canvas+JsPDF 导出pdf 问题:类似于下面着这种网络图片使用img导出的时候是空白的 https://gimg3.baidu.com/search/src=http%3A%2F% ...
Ureport2导出内容加入PDF文件
Ureport2导出内容加入PDF文件处理ureport导出的内容(不需要ureport生成文件) ureport导出内容时会生成一个xml文件,我们需要拿到这个文件. 如果想让导出内容本身做为一个 ...
怎么修改PDF内容，PDF文件如何修改文字
相信现在大家都接触到PDF文件了吧,相信大家也发现了PDF文件上面的文字不可以直接的修改编辑,PDF文件的编辑是需要PDF编辑器的,那么,如何修改PDF内容,修改PDF文字呢,是不是有很多的小伙伴不知 ...
Typora基础用法：pandoc安装，导入导出word文档,pdf文件。设置图片目录
点击观看B站视频 Typora基础用法:pandoc安装,导入导出word文档,pdf文件.设置图片目录. 一. pandoc安装首次安装完typora,是没法导入的,需要安装pandoc 选择[请 ...
将地图导出为图片或PDF文件
简介地图是以QGIS工程作为基础,提供一种工具可以方便将QGIS配置好的地图工程导出为图片或PDF文件.效果如下: 下载QQ群:610712943,1156555959(自动加群,仅供软件下载,不聊 ...
关于导出编辑后的PDF文件中目录带框的情况及解决
导出编辑后的PDF文件中目录带框的情况及解决 1.情况描述 1.1. 使用软件 1.2. 操作过程 2.解决办法 3.说明 1.情况描述 1.1. 使用软件 1.Word 2016 2.金山PDF专业 ...
jspdf添加宋体_jspdf下载pdf文件模糊，字体加粗等样式失效
jspdf下载pdf文件模糊,字体加粗等样式失效 exportPDF = () => {let { shop } = this.props; let element = document.get ...
iframe 加载pdf文件
使用iframe标签,给上高度.宽度,效果和用浏览器打开pdf文件一致.支持下载.打印等功能. <!DOCTYPE html> <html lang="en"&g ...
标签制作软件中如何导出标签模板为PDF文件？
最近小编遇到有些客户问在标签制作软件中设计好的标签模板,能不能导出PDF文件保存,小编的回答是当然可以,而且操作也是非常简单的,接下来小编给大家演示下是如何操作的. 首先在标签制作软件中新建一个标签, ...

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

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

使用html2canvas+jspdf导出iframe内容到pdf文件相关推荐

最新文章

热门文章