纯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 -Scnpm 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>创建时间<spanlang=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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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><spanstyle='font-size:12.0pt;font-family:宋体'>：</span></p><p class=1 style='margin-left:48.6pt;text-indent:0cm'><span lang=EN-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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-USstyle='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实现的相关博客链接放到下面：
