一、开发问题

　　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>

// 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>
                  <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项目获取富文本编辑器wangEditor内容导出为word（html转word格式并下载）的更多相关文章

  1. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  2. 富文本编辑器 - wangEditor 上传图片

    效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...

  3. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  4. Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! ...

  5. bbs项目引入富文本编辑器和处理xss攻击和文章预览

    一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...

  6. 富文本编辑器(wangEditor)

    近期在产品的开发工作中遇到要使用富文本编辑器的地方.于是对比了几款编辑器, 最后选择了wangEditor. 优点:轻量.简洁.界面美观.文档齐全.   缺点: 相较于百度ueditor等编辑器功能较 ...

  7. Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新）

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  8. Vue整合Quill富文本编辑器

    Quill介绍 Quill是一款开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制.截止2021年1月,在github上面已有28.8k的star. Quill项目地址:https ...

  9. 轻量级富文本编辑器wangEditor

    开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.

  10. 给web项目整合富文本编辑器

    给jsp页面整合富文本编辑器下载——删除多余的组件——加入到项目中——参照案例来完成整合步骤:1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下. 2. 将 ...

随机推荐

  1. 生态兼容性进一步提升！白鲸开源 WhaleStudio 与火山引擎ByteHouse完成产品互认

    数据作为新型生产要素,已快速融入生产.分配.流通.消费和社会服务管理等各环节,深刻改变着生产方式.生活方式和治理方式.越来越多企业也在尝试充分利用数据要素,开辟全新发展路径,进一步实现业务价值提升. ...

  2. Floyd判联通(传递闭包) & poj1049 sorting it all out

    Floyd判联通(传递闭包) Floyd传递闭包顾名思义就是把判最短路的代码替换成了判是否连通的代码,它可以用来判断图中两点是否连通.板子大概是这个样的: for(int k=1; k<=n; ...

  3. quartz执行卡死--强制中断线程

    在quartz中经常会碰到由于网络问题或者一些其他不稳定因素导致的线程卡死问题,这往往会导致数据处理的延时.而有时候一时无法定位到卡死的原因,为了降低系统风险,我们就会希望有一个超时机制,当执行超时时 ...

  4. JavaScript 的优雅编程技巧：Singleton Pattern

    JavaScript 的优雅编程技巧:Singleton Pattern 定义 单例模式:保证一个类仅有一个实例,并提供一个访问的全局访问点. 特点 仅有一个实例对象 全局都可访问该实例 主动实例化 ...

  5. 编译stvo-pl报错error: ‘random_device’ was not declared in this scope 解决方案

    近来在研究PL-SLAM时,由于要安装stvo-pl库,所以我下载安装了这个库.在编译阶段我遇到了一个让人头大的问题. 即红框标出的地方报错:error: 'random_device' was no ...

  6. 链接器 ld 名称的由来

    Linker 通常缩写为 LD,这是因为在 Unix 和类 Unix 系统中,ld 是链接器的常用命令名称.这个命名可以追溯到 Unix 系统的早期发展历史. 历史背景 Unix 早期:在 Unix ...

  7. Linux 运行 Bitcoin 软件

    首先进入官网 bitcoin.org 下载 Bitcoin Core. 下载得到 tar.gz 文件后解压,并安装: tar xzf bitcoin-25.0-x86_64-linux-gnu.tar ...

  8. 基于 Quanto 和 Diffusers 的内存高效 transformer 扩散模型

    过去的几个月,我们目睹了使用基于 transformer 模型作为扩散模型的主干网络来进行高分辨率文生图 (text-to-image,T2I) 的趋势.和一开始的许多扩散模型普遍使用 UNet 架构 ...

  9. Maven的下载安装配置

    Maven的下载安装配置 Maven是什么 Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工 ...

  10. 有哪些让你「 爽到爆炸 」的 Windows 软件？

    前言 本文源于知乎的一个提问,如标题所示:有哪些让你「 爽到爆炸 」的 Windows 软件?今天大姚给大家分享6款C#/.NET开源且免费的Windows软件,希望可以帮助大家提高学习.开发.办公效 ...