导出的页面组件如下：
<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、https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
2、file-writer
3、nodejs(officegen)+vue(axios)在客户端导出word文档
4、Vue导出页面为PDF格式
5、vue实现word，pdf文件的导出
以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容