云南龙网

  1. 首页 > 生活百科 > >

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

生活百科

HTML转PDF：
1.页面底层实现——Vue：最低兼容ie10
2.实现思路：
1 使用html2canvas.js将网页转换为图片
2 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件
具体实现：
要这样实现首先要引入两个插件：
html2canvas.js
jsPdf.debug.js
注：
因为ie10在canvas截图时候会出现部分样式丢失的情况，所以在代码中有部分修改了页面的样式
所以建议在做截图的时候，将页面代码复制一份到隐藏域，在隐藏域里面做修改，这样就不会修改页面原有样式了
如果大家有更好的方法，欢迎提议
下面上代码：
script type="text/ecmascript-6"import co from ’co’import html2Canvas from ’../html2canvas’import JsPDF from ’../jsPdf.debug’export default { title: ’用户信息’, data () {return {} }, methods: { // 核心代码printOut () {// 获取需要打印的区域，以div为单位，此处使用的是vue的选择器let pdfDom = document.querySelector(’#pdf-wrap’)// 因为在ie10下，会出现input样式丢失的情况，所以在此处清楚input的标签的边框let arrnode = pdfDom.querySelectorAll(’input’)for (var i = 0; iarrnode.length; i) {arrnode[i].style.border = ’hidden’}// 设置背景色pdfDom.style.background = ’#FFFFFF’let _this = thishtml2Canvas(pdfDom, {allowTaint: true, taintTest: false,onrendered: function (canvas) {// 开始canvas截图// 开始准备工作let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeight// 此处图片格式可以是PNG，也可是JPEG，注意：需要考虑Browser支持的图片格式let pageData = https://www.rkxy.com.cn/dnjc/canvas.toDataURL(’image/PNG’, 1)pdfDom.style.display = ’none’// 开始将图片转换为PDF// 设置纸张大小，方向let PDF = new JsPDF(’’, ’pt’, ’a4’)if (leftHeightpageHeight) {PDF.addImage(pageData, ’PNG’, 0, 0, imgWidth, imgHeight)} else {while (leftHeight0) {PDF.addImage(pageData, ’PNG’, 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight0) {PDF.addPage()}}}// 保存PDFPDF.save(_this.userInfo.card_id’-’_this.userInfo.user_name’.pdf’)}})html2Canvas()} }, ready () { }}/script总结
【最低兼容ie10 Vue网页html转换PDF的思路详解】以上所述是小编给大家介绍的Vue网页html转换PDF（最低兼容ie10）的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的 。在此也非常感谢大家对我们网站的支持！
您可能感兴趣的文章:vue学习笔记之指令v-text && v-html && v-bind详解用v-html解决Vue.js渲染中html标签不被解析的问题Vue.js绑定HTML class数组语法错误的原因分析vue2.0全局组件之pdf详解vue中将网页打印成pdf实例代码

    推荐阅读


    上一篇：无敌剑域杨无敌第几章出现

    下一篇：19+70等于几