vue导出html、word和pdf的实现代码
程序员文章站
2022-07-06 12:03:53
导出的页面组件如下：
导出的页面组件如下：
<template> <div id="resumeid"> <resumehtml ref="resume" @on-download="download"/> </div> </template>
1、导出html
方法：
1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出
2）获取要导出组件页面的html的dom标签代码，通过this.$refs.resume.$el.innerhtml获取，也可以通过document.getelementbyid('resumeid')获得
3）构造html页面，并使用createobjecturl构造一个文件流并下载，如下：
var a = document.createelement('a');
var url = window.url.createobjecturl(new blob([content],
{ type: (option.type || "text/plain") + ";charset=" + (option.encoding || 'utf-8') }));
a.href = url;
a.download = filename || 'file';
a.click();
window.url.revokeobjecturl(url);
具体代码如下：
import axios from 'axios'
import resumehtml from './resume-html'
import writer from 'file-writer';
import {resumecss} from '@/assets/style/download/resume.css.js'
...
downloadhtml(name){
let html = this.gethtmlcontent();
let s = writer(`${name}的简历.html`, html, 'utf-8');
console.log('s stream',s);
},
gethtmlcontent(){
const template = this.$refs.resume.$el.innerhtml;
let html = `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>x-find迅聘选才</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
<style>
${resumecss}
</style>
</head>
<body>
<div class="resume_preview_page" style="margin:0 auto;width:1200px">
${template}
</div>
</body>
</html>`;
return html;
}
导出的样式js文件：
export const resumecss =`
html,
body {
position: relative;
height: 100%;
}
.page_layout {
position: relative;
height: 100%;
display: flex;
& .layout_content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
}
...
2、导出word
方法：
1）使用上面构造好的html文本，以文件流的形式发送到后台，后台通过转换得到word流传给前端并下载
let url = `${this.$url}/uploadfile/uploadresume`;
let html = this.gethtmlcontent();
// 构造blob文件流
let html_ = new blob([html],{ "type" : "text/html;charset=utf-8" })
let formdata = new formdata();
formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名
axios({
method: 'post',
url: url,
data:formdata,
responsetype:'blob',//这里如果不设置，下载会打不开文件
})
.then(res=>{
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文件，如下代码
// 下面两个package要单独安装
import html2canvas from 'html2canvas'
import jspdf from 'jspdf'
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', 0, 0, imgwidth, imgheight)
} else {
while (leftheight > 0) {
pdf.addimage(pagedata, 'jpeg', 0, position, imgwidth, imgheight)
leftheight -= pageheight
position -= 841.89
if (leftheight > 0) {
pdf.addpage()
}
}
}
pdf.save(title + '.pdf')
}
)
}
}
}
2）main.js文件中添加如下代码：
import htmltopdf from '@/utils/htmltopdf' vue.use(htmltopdf)
3）然后就可以在要导出pdf文件组件里面添加 如下 代码即可导出
this.getpdf('resumeid',name)
总结：
1、虽然完成了三种文件的导出但是我对word和html导出还是不满意，不是最佳解决方法，如果 有人有更好的方法，欢迎留言
2、导出的word没有了样式，所以这块还是有问题
引用 ：
1、
2、
3、
5、
以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码，希望对大家有所帮助