首页 前端知识 vue3-element-ui ckeditor4 预览和编辑word文档(word数据由后端接口返回-使用DocumentFormat.OpenXml 转成html字符串)

vue3-element-ui ckeditor4 预览和编辑word文档(word数据由后端接口返回-使用DocumentFormat.OpenXml 转成html字符串)

2024-05-10 08:05:03 前端知识 前端哥 532 782 我要收藏

vue3-element-ui + ckeditor4 预览和编辑word文档(word数据由后端接口返回-使用DocumentFormat.OpenXml 转成html字符串)

  • 需求描述
    • 需求现状
    • 第一步,ckeditor组件的下载与安装
    • 第二步,预览word文档
    • 解决显示乱码问题
    • 第三步,使用编辑器工具栏中的保存按钮来保存word文档

需求描述

最近遇到一个需求:对已上传服务器的word文档使用ckeditor富文本编辑器实现预览和编辑功能。
之前没有接触过ckeditor组件,只能一边查资料一边自己摸索。

需求现状

1、目前已实现word文档的在线预览(word数据由后端API获取返回)
2、文档编辑后点击工具栏的”保存“按钮保存编辑后的数据

第一步,ckeditor组件的下载与安装

  这一点就不多说了,网上有很多详细教程,我也是按照网上的教程进行安装的。
  但是网上的大神们侧重的是教会大家安装,安装成功后没有把word文档中的信息显示到编辑器中逻辑,
  一般是前端直接扔一句简单的字符串显示就结束了。

第二步,预览word文档

  作为初次接触该组件的人,试了传入文件流和byte数组等方式结果显示乱码,如下图:

富文本编辑器显示乱码

解决显示乱码问题

后端API读取word文档后使用DocumentFormat.OpenXml 把文档内容转成html字符串再返回。不知道这么做对不对,反正实现正常预览了。

API部分代码:

    // word文档保存路径
    var filePath = ".\\doc.docx";
    byte[] byteArray = System.IO.File.ReadAllBytes(filePath);
    using (MemoryStream memoryStream = new MemoryStream())
    {
        memoryStream.Write(byteArray, 0, byteArray.Length);
        using (WordprocessingDocument doc = WordprocessingDocument.Open(memoryStream, true))
        {
            HtmlConverterSettings settings = new HtmlConverterSettings();
            XElement html = HtmlConverter.ConvertToHtml(doc, settings);
            return html.ToString();
        }
    }
}

正确预览
在这里插入图片描述

第三步,使用编辑器工具栏中的保存按钮来保存word文档

ckeditor4组件基础版和标准版的工具栏中是没有保存按钮的,完整版里面有,安装的时候根据个人需要来选择版本。组件引用进来后,保存按钮默认是置灰的,扒了下官方API,需要把editor放在表单中才会亮起。
在这里插入图片描述
在这里插入图片描述
前端vue代码:

<template>
  <div>
    <form>
      <textarea :id="id" name="content"></textarea>
    </form>
  </div>
</template>

在这里插入图片描述
下一步就是重写保存按钮来实现编辑word文档后保存到服务器了。
重写工具栏保存按钮
在这里插入图片描述

    // 重写保存事件
    this.ckeditor.on('instanceReady', () => {
      this.ckeditor.addCommand('save', {
        modes: { wysiwyg: 1, source: 1 },
        exec: () => {
          this.$emit('saveContnet', this.ckeditor.getData())
        }
      })
    })

在这里插入图片描述
在这里插入图片描述
重写工具栏保存方法后,就可以在使用组件的地方进行保存到后台的方法了

最后再保存到word文档就可以啦…

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7789.html
标签
c#word
评论
发布的文章

JSON加密的看法

2024-05-14 23:05:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!