富文本编辑器(html格式)导出为word（vue实现）
2024-06-16 03:23:21
纯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>
<!--/* 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实现的相关博客链接放到下面：
富文本编辑器(html格式)导出为word（vue实现）相关推荐
- word读入富文本编辑器,编辑后导出下载word日常总结
基本思路就是: 使用poi读入word文档, 读入内容转为html内容,(直接读入text仅仅只是文本没有格式) 将html内容给富文本编辑器显示(这样的目的是带格式). 下边贴代码: poi读入wo ...
- 基于summernote的富文本编辑器，粘贴时去除word格式
在使用summernote的富文本编辑器,在粘贴word内容时,会发现代码中有很多无效的代码.通过js处理,可以去掉很多无用的代码. 处理前,粘贴后的代码类似这样: <p><!--[ ...
- 富文本编辑器实现一键粘帖word图片
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- 基于summernote的富文本编辑器，粘贴时去除word、html格式
<script> $(document).ready(function() { $('#summernote').summernote({ height: 350, lang: 'zh-C ...
- AVUE 富文本编辑器 avue-plugin-ueditor 格式刷功能 ver.0.2.7
avue-plugin-ueditor 版本:0.2.7 背景: 依据操作人员需求,认为目前在线编辑器没有ckeditor好用,也没有格式化的功能,目前项目是基于avue框架开发,使用了avue-pl ...
- html编辑保存为word文档,html 保存成word (富文本编辑器导出内容成word)
这几天项目里有个需求,用到富文本编辑器,然后导出word. 富文本编辑器,网上很多,使用夜很简单,我们使用的是kindEditor.百度的ueditor很好,而且文档很全.阿里的kissy 感觉比较复 ...
- wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器:自定义粘贴,去除复制word或网页html冗余样式代码的解决方案 1.环境说明 2.解决方案 3.完整代码 总结 在使用wangEditor富文本编辑器时,当从wor ...
- 文本编辑器_markdown编辑器与富文本编辑器优缺点比较
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用方 ...
- markdown编辑器与富文本编辑器优缺点比较，哪个更好用
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用 ...
最新文章
- iOS开发 - UITextView输入时高度自适应
- CSS样式中” 大于号”
- Vue开发规范1.0
- 使用Virtual PC做病毒的试验
- 访问25％无法访问的人-如何设计可访问性
- 导入，导出字符和数字的转换
- 特斯拉入驻天猫卖车了 将连做8天直播
- Python 程序员如何防止数据被修改？
- 2016计蒜之道复赛 百度地图的实时路况 floyd+cdq分治
- 数据库设计-电话号码长度
- netware php_服务器_如何在 Netware 服务器中安装多块网卡，如果网络在扩大时服务器只装 - phpStudy...
- iBeacon距离测量误差有多大
- java扫雷设计_Java扫雷设计
- 后端学习 - 操作系统
- Hadoop-The variance for this alert is **MB which is 20% of the **MB average (**MB is the limit)
- 新品上市 | Xilinx FPGA 下载器
- 如何做好API开发 文档
- Java通过FFmpeg录制屏幕
- 网狐棋牌客户端连接服务器修改方法
- 分享十个有趣实用的经典宝藏级网站