vue导出html、word和pdf的实现代码

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

导读：导出的页面组件如下： 1、导出html 方法： 1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出 2）获取要导出组件页面的html的dom标签代码，通过 this.$refs.resume.$el.innerHTML 获取，也可以通过 document.getElementById('resumeId')

导出的页面组件如下：

1、导出html

方法：

1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出

2）获取要导出组件页面的html的dom标签代码，通过this.$refs.resume.$el.innerHTML获取，也可以通过document.getElementById('resumeId')获得

3）构造html页面，并使用createObjectURL构造一个文件流并下载，如下：

X-Find迅聘选才

`; return html; }

导出的样式js文件：

.page_layout {
position: relative;
height: 100%;
display: flex;
& .layout_content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
}
...

2、导出Word

方法：

1）使用上面构造好的html文本，以文件流的形式发送到后台，后台通过转换得到word流传给前端并下载

{ console.log('download res',res); //通过后台返回的word文件流设置文件名并下载 var blob = new Blob([res.data],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型 var downloadElement = document.createElement('a'); var href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.href = href; downloadElement.download ='s.doc'; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 })

3、导出PDF

方法：

1）创建一个htmlToPdf.js文件，如下代码

export default{
install (Vue,options) {
Vue.prototype.getPdf = function (id,title) {
html2Canvas(document.querySelector(#${id}),{
// allowTaint: true
useCORS:true//看情况选用上面还是下面的，
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth contentHeight
let pageData = canvas.toDataURL('image/jpeg',1.0)
let PDF = new JsPDF('','pt','a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData,'JPEG',imgWidth,imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData,position,imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}

2）main.js文件中添加如下代码：

3）然后就可以在要导出pdf文件组件里面添加如下代码即可导出

总结：

1、虽然完成了三种文件的导出但是我对word和html导出还是不满意，不是最佳解决方法，如果有人有更好的方法，欢迎留言

2、导出的word没有了样式，所以这块还是有问题

引用：

1、

2、

3、

4、

5、

以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

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