富文本编辑器(html格式)导出为word（vue实现）
纯Vue实现将多个富文本编辑器内容[html格式]统一导出为word
- 一、vue需要导入的包
- 二、制作html的格式
- 1. 为了方便，先用word制作成对应的导出样式，然后通过word导出为html格式** ，如下图：
- 2. 写template.js为了方便在页面引入（js水平一般，勿喷）**
- 3. 在 vue对应的界面引入前面下载的两个组件，以及对应的template.js**
- 5. 结果如下，点击对应导出，将row传给download函数，通过axios发送后端请求，返回存在数据库的是各个文本编辑器的content(html片段)：
- 三、思考
一、vue需要导入的包
1.html-docx-js
2.file-saver
关于cnpm,采用国内镜像下载较快，安装过程的请参考cnpm安装和使用
cnpm install html-docx-js -S
cnpm install file-saver -S
二、制作html的格式
1. 为了方便，先用word制作成对应的导出样式，然后通过word导出为html格式** ，如下图：
2. 写template.js为了方便在页面引入（js水平一般，勿喷）**
function makeHtml(article){
if(typeof article.titleContent === 'undefined' || article.titleContent === null)
article.titleContent=""
if(typeof article.abstractContent === 'undefined' || article.abstractContent === null)
article.abstractContent=""
if(typeof article.projectBasisContent === 'undefined' || article.projectBasisContent === null)
article.projectBasisContent=""
if(typeof article.targetContent === 'undefined' || article.targetContent === null)
article.targetContent=""
if(typeof article.researchContent === 'undefined' || article.researchContent === null)
article.researchContent=""
if(typeof article.technologyRouteContent === 'undefined' || article.technologyRouteContent === null)
article.technologyRouteContent=""
if(typeof article.technologyKeyContent === 'undefined' || article.technologyKeyContent === null)
article.technologyKeyContent=""
if(typeof article.innovationContent === 'undefined' || article.innovationContent === null)
article.innovationContent=""
if(typeof article.applicationProspectContent === 'undefined' || article.applicationProspectContent === null)
article.applicationProspectContent=""
if(typeof article.basicConditionContent === 'undefined' || article.basicConditionContent === null)
article.basicConditionContent=""
if(typeof article.riskResponseContent === 'undefined' || article.riskResponseContent === null)
article.riskResponseContent=""
if(typeof article.scheduleContent === 'undefined' || article.scheduleContent === null)
article.scheduleContent=""
if(typeof article.budgetContent === 'undefined' || article.budgetContent === null)
article.budgetContent=""
if(typeof article.name === 'undefined' || article.name === null)
article.name=""
if(typeof article.gmtCreate === 'undefined' || article.gmtCreate === null)
article.gmtCreate=""
let htmlStr =`
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=Generator content="Microsoft Word 15 (filtered)">
<style>
style>
head>
<body lang=ZH-CN style='word-wrap:break-word;text-justify-trim:punctuation'>
<div class=WordSection1 style='layout-grid:15.6pt'>
<p class=MsoNormal align=center style='text-align:center;line-height:150%;
text-autospace:none'><span style='font-size:16.0pt;line-height:150%;font-family:
宋体'>标题：<span lang=EN-US>`+article.titleContent+`span>p>
<p class=MsoNormal align=center style='text-align:center;text-indent:21.0pt;
line-height:150%;text-autospace:none'><span style='font-size:12.0pt;line-height:
150%;font-family:宋体'>作者：<span lang=EN-US>`+article.name+` span>创建时间<span
lang=EN-US>:`+article.gmtCreate+`span>p>
<p class=MsoNormal style='text-indent:21.0pt;line-height:150%;text-autospace:
none'><span style='font-size:14.0pt;line-height:150%;font-family:宋体'>摘要：span>p>
<p class=MsoNormal align=left style='text-align:left;text-indent:24.0pt;
line-height:150%;text-autospace:none'><span lang=EN-US style='font-size:12.0pt;
line-height:150%;font-family:宋体'>`+article.abstractContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>一、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>立项依据span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.projectBasisContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>二、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>目标指标span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.targetContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>三、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>研究内容span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.researchContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>四、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>技术路线span><span
style='font-size:12.0pt;font-family:宋体'>：span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.technologyRouteContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>五、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>技术关键span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.technologyKeyContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>六、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>创新性span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.innovationContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>七、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>应用前景span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.applicationProspectContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>八、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>基础条件span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.basicConditionContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>九、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>风险应对span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.riskResponseContent+`span>p>
<p class=1 style='margin-left:48.6pt;text-indent:-27.6pt'><span lang=EN-US
style='font-size:14.0pt;font-family:宋体'>十、<span style='font:7.0pt "Times New Roman"'>
span>span><span style='font-size:14.0pt;font-family:宋体'>进度安排span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.scheduleContent+`span>p>
<p class=1 style='margin-left:21.0pt;text-indent:0cm'><span style='font-size:
14.0pt;font-family:宋体'>十一、经费预算span>p>
<p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-US
style='font-size:12.0pt;font-family:宋体'>`+article.budgetContent+`span>p>
<p class=MsoNormal><span lang=EN-US> span>p>
div>
body>
html>
`
return htmlStr;
}
export default makeHtml
3. 在 vue对应的界面引入前面下载的两个组件，以及对应的template.js**
- dowload函数，参数row是我界面的每一行元素（elementUI）
download(row) {
this.getRequest("/salary/month/select/" + row.id).then((res) => {
let htmlStr = makeHtml(res.obj);//通过template.js获取
saveAs(
htmlDocx.asBlob(htmlStr, {
orientation: "landscape"//跨域设置
}),
//文件名
row.name + '-' + row.id + ".doc"
)
});
},
其中this.getRequest是自己封装的axios，如下：
5. 结果如下，点击对应导出，将row传给download函数，通过axios发送后端请求，返回存在数据库的是各个文本编辑器的content(html片段)：
可以将包含富文本编辑器的图片内容进行导出，缺点是格式混乱，但是满足导出富文本编辑器的功能
三、思考
1.做过用freemark后端先制作word模板转化为mht格式，在转为ftl的方法，发现本地文件可以，但是因为富文本编辑器是默认将上传图片转为base64格式，但是后端方式的缺点不同大小的图片转成base64所生成的字符串过多，从而导致导出失败，所以采用纯vue实现。
2.将多个富文本编辑器的内容存到了数据库，可能数据库压力过大；
3.关于最后生成的doc格式，建议先用doc制作成对应的样式模板，然后将doc转为html
4.参考了好多前后端实现的博客，就不一一列举了，把vue实现的相关博客链接放到下面：