富文本编辑器(html格式)导出为word（vue实现）
Vue 富文本编辑器 html word
·
纯Vue实现将多个富文本编辑器内容[html格式]统一导出为word
一、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>
<!--
/* Font Definitions */
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:等线;
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"\@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:"\@等线";
panose-1:2 1 6 0 3 1 1 1 1 1;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
text-align:justify;
text-justify:inter-ideograph;
font-size:10.5pt;
font-family:等线;}
p.1, li.1, div.1
{mso-style-name:列表段落1;
margin:0cm;
text-align:justify;
text-justify:inter-ideograph;
text-indent:21.0pt;
font-size:10.5pt;
font-family:"Calibri",sans-serif;}
.MsoChpDefault
{font-family:等线;}
/* Page Definitions */
@page WordSection1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
layout-grid:15.6pt;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->
</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实现的相关博客链接放到下面：
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)