Vue网页html转换PDF(最低兼容ie10)的思路详解
HTML转PDF:
1.页面底层实现——Vue:最低兼容ie10
2.实现思路:
1>使用html2canvas.js将网页转换为图片
2>使用jsPdf.debug.js将canvas生成的图片转换为pdf文件
具体实现:
要这样实现首先要引入两个插件:
html2canvas.js
jsPdf.debug.js
注:
因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式
所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这样就不会修改页面原有样式了
如果大家有更好的方法,欢迎提议
下面上代码:
importcofrom'co' importhtml2Canvasfrom'../html2canvas' importJsPDFfrom'../jsPdf.debug' exportdefault{ title:'用户信息', data(){ return{} }, methods:{ //核心代码 printOut(){ //获取需要打印的区域,以div为单位,此处使用的是vue的选择器 letpdfDom=document.querySelector('#pdf-wrap') //因为在ie10下,会出现input样式丢失的情况,所以在此处清楚input的标签的边框 letarrnode=pdfDom.querySelectorAll('input') for(vari=0;i 0){ PDF.addImage(pageData,'PNG',0,position,imgWidth,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)的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。