富文本编辑器(html格式)导出为word(vue实现)

一、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格式** ,如下图:

在这里插入图片描述
根据写文章的需求,每个content都是对应文本编辑器的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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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"'>&nbsp;&nbsp;&nbsp;
</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>&nbsp;</span></p>

</div>

</body>

</html>

`
return htmlStr;
}
export default makeHtml

3. 在 vue对应的界面引入前面下载的两个组件,以及对应的template.js**

template.js是放在同一目录下,这个无所谓

  1. 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实现的相关博客链接放到下面:

  • 6
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值