vue项目获取富文本编辑器wangEditor内容导出为word（html转word格式并下载） - Roséa

一、开发问题

　　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仓库已经不更新，没有人维护！有问题自己解决或找替代方案！

// template

<Wangeditor ref="wangEditor" :editorStyle="{ height: '100%' }" @blur="handleBlur" @change="handleChange" />

　<a-button class="box-download" type="link" size="small" @click="fileDownload()">导出</a-button>


// script

import htmlDocx from 'html-docx-js/dist/html-docx'

import FileSaver from 'file-saver'


handleBlur(content){
　 this.$refs.wangEditor.handleSetHtml(content);

　　this.$refs.wangEditor.clear(); // 根据实际情况清空编辑器内容

},

handleChange(content){ // 存储编辑器内容

　　this.content = content;

},
fileDownload(){

　　// 点击导出word文件

　　this.$message.warning('导出中...') // 提示语

　　　let content=`<!DOCTYPE html><html>

<head>

</head>

<body>

<div>

${this.content}

</div>

</body>

</html>`

　　　let converted = htmlDocx.asBlob(content); // 针对普通文本导出

FileSaver.saveAs(converted, `富文本编辑器内容.docx`);

this.$message.success('导出成功')

},

posted on 2024-05-31 16:56 Roséa 阅读(2093) 评论(0) 收藏举报

刷新页面返回顶部