一、开发问题
html-doc-js，只能处理简单的富文本导出为word，对于编辑器中部分图文和样式会不生效，而wangEditor默认设置有下图这么多，所以要自己尝试找替代方案去解决html内容。
例如：列表、表情emoji、高度、css样式、图片、视频、表格、代码块等。
问题1：css样式不生效，解决方法：
尽量不用内联样式，在导出word时把css样式放在head头部<style></style>中。
css link 链接，先获取css资源，转换成文本，然后合并在html style中。（待验证）
问题2： 遇到加粗、下划线、背景颜色等不生效，解决方法：
最粗暴的改法：换标签写法~
加粗： content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>')
背景颜色/下划线： content.replace(/<mark/g, '<span').replace(/<\/mark>/g, '</span>')
剩余问题： 要一一验证~
重点：git仓库已经不更新，没有人维护！有问题自己解决或找替代方案！
二、页面获取wangeditor内容代码
// template
<Wangeditor ref="wangEditor" :editorStyle="{ height: '100%' }" @blur="handleBlur" @change="handleChange" />
<a-button class="box-download" type="link" size="small" @click="fileDownload()">导出</a-button>
import htmlDocx from 'html-docx-js/dist/html-docx' import FileSaver from 'file-saver'
// script
this.$refs.wangEditor.clear(); // 根据实际情况清空编辑器内容
handleBlur(content){
this.$refs.wangEditor.handleSetHtml(content);
},
handleChange(content){ // 存储编辑器内容
this.content = content;
},
fileDownload(){
// 点击导出word文件
this.$message.warning('导出中...') // 提示语
let content=`<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
${this.content}
</div>
</body>
</html>`
let converted = htmlDocx.asBlob(content); // 针对普通文本导出
FileSaver.saveAs(converted, `富文本编辑器内容.docx`);
this.$message.success('导出成功')
},标签：文本编辑,vue,word,wangEditor,导出,content,html,css From： https://www.cnblogs.com/anniey/p/18224778