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

前端之家收集整理的这篇文章主要介绍了vue导出html、word和pdf的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

导出的页面组件如下:

1、导出html

方法

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

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

3)构造html页面,并使用createObjectURL构造一个文件流并下载,如下:

代码如下:

<Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> 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的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31292.html

猜你在找的Vue相关文章