Vue网页html转换PDF（最低兼容ie10）的思路详解

发布时间：2020-12-17 02:49:35 所属栏目：百科来源：网络整理

导读：HTML转PDF： 1.页面底层实现——Vue：最低兼容ie10 2.实现思路： 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件具体实现：要这样实现首先要引入两个插件： html2canvas.js jsPdf.debug.js 注：因为ie10在

HTML转PDF：

1.页面底层实现——Vue：最低兼容ie10　　

2.实现思路：

　　1> 使用html2canvas.js将网页转换为图片

　　2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件

具体实现：

　　要这样实现首先要引入两个插件：

　　　　html2canvas.js

　　　　jsPdf.debug.js

注：

　　因为ie10在canvas截图时候会出现部分样式丢失的情况，所以在代码中有部分修改了页面的样式

　　所以建议在做截图的时候，将页面代码复制一份到隐藏域，在隐藏域里面做修改，这样就不会修改页面原有样式了

　　如果大家有更好的方法，欢迎提议

下面上代码：

0) { PDF.addImage(pageData,position,imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } 　　　　　　// 保存PDF PDF.save(_this.userInfo.card_id + '-' + _this.userInfo.user_name + '.pdf') } }) html2Canvas() } },ready () { } }

总结

以上所述是小编给大家介绍的Vue网页html转换PDF（最低兼容ie10）的思路详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!