前端vue使用onlyoffice控件实现word在线编辑、预览(仅列出前端部分需要做的工作,不包含后端部分)

简介

ONLYOFFICE 文档 是一个开源办公套件,包括文本文档、电子表格、演示文稿和可填写表单的编辑器。
它提供以下功能:
创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单;
与其他队友实时协作处理文件。
基于这个控件,可以实现前端word、excel、pdf等文件在线编辑、预览,可以说非常强大,目前项目中只使用到word编辑预览,但拓展其他文件也非常简单,完善类型传参,更改onlyoffice配置参数中的文件类型即可。
在这里插入图片描述

前端引入onlyoffice的api.js

需要后端服务器上安装配置好 ONLYOFFICE 文档
前端非常简单,引入一行js即可,documentserver即安装配置好 ONLYOFFICE 文档的后端服务器地址,该地址让后端提供,前端引入即可

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

onlyoffice如何使用

1.封装一个onlyoffice页面,在vue-router路由中注册该页面
<template>
  <div id="onlyoffice"></div>
</template>
<script>
export default {
  mounted() {
    this.fileDeal();
  },
  methods: {
    fileDeal() {
      let config;
      // 判断时编辑还是预览
      if (this.$route.query.openType === 'edit') {
        config = this.editOfficeConfig();
      } else {
        config = this.viewOfficeConfig();
      }
      new window.DocsAPI.DocEditor('onlyoffice', config);
    },
    editOfficeConfig() {
      let urlView = '';
      urlView =
        window.BASE_URL +
        `/gczd/fill/template/file/content?id=${this.$route.query.id}`;
      let callbackUrl = '';
      callbackUrl =
        window.BASE_URL +
        `/gczd/detail/file/callback?fileId=${this.$route.query.id}`;
      return {
        document: {
          mode: 'edit',
          fileType: 'docx',
          key: this.$route.query.id,
          title: '测试wordw文件.docx',
          url: urlView,
          permissions: {
            edit: true,
          },
        },
        documentType: 'word',
        editorConfig: {
          user: {
            name: this.$store.state.user.nickName,
            id: this.$store.state.user.userId,
          },
          // 隐藏插件菜单
          customization: {
            plugins: false,
          },
          lang: 'zh',
          callbackUrl: callbackUrl,
        },
        height: '100%',
        width: '100%',
      };
    },
    // 纯查看
    viewOfficeConfig() {
      let urlView = '';
      urlView =
        window.BASE_URL +
        `/gczd/fill/template/file/content?id=${this.$route.query.id}`;
      return {
        document: {
          mode: 'view',
          fileType: 'docx',
          key: this.$route.query.id,
          title: '测试wordw文件.docx',
          url: urlView,
          permissions: {
            edit: false,
          },
        },
        documentType: 'word',
        editorConfig: {
          user: {
            name: this.$store.state.user.nickName,
            id: this.$store.state.user.userId,
          },
          customization: {
            plugins: false,
          },
          lang: 'zh',
        },
        height: '100%',
        width: '100%',
      };
    },
  },
};
</script>

<style lang="scss" scoped>
#file-info {
  position: fixed;
  top: 0px;
  z-index: 999;
}
</style>
2.代码解释

new window.DocsAPI.DocEditor是从https://documentserver/web-apps/apps/api/documents/api.js中获取的构造函数,第一个参数是dom的id,onlyoffice会往这个id的dom下生成插入一个iframe,第二个参数是onlyoffice的配置项

配置项文档

很多配置项一目了然是干啥的,直接对照官方文档即可https://api.onlyoffice.com/zh/editors/config/,重点讲解一下urlcallbackUrl

配置项中的url是什么

可以看到前端拼接了一个url的配置项,这个url其实就是后端的一个接口,onlyoffice通过这个接口去打开word等文件。
那么问题来了,这个配置项中的url接口是get还是post?是文件绝对路径还是支持文件流?
答案是:都可以。
可以是一个get请求,即通过绝对路径访问资源,也可以是post请求返回文件流,onlyoffice内部有做处理,传url时不需要指定接口的类型,都可以正常加载,厉害了。
如果打开时出现"下载失败",用postman好好测测这个url接口,能否直接请求通,一般就是这个接口有问题。

配置项中的callbackUrl是什么

callbackUrl就是编辑完文档保存时会调用的一个后端接口,具体信息查看官方文档https://api.onlyoffice.com/zh/editors/callback,后端根据不同status判断文档的状态,编辑完之后会返回后端一个临时缓存文件的url,后端根据这个临时缓存文件url进行文件更新

支持除了word的其他文件

修改fileType和documentType配置字段即可,后续如果有相关实现也会更新文章

注意点

1.key字段是用来识别文档的唯一文档标识符,官方文档说key字段为应当在编辑或保存后更新,但实际开发中前端没有更新key值,编辑保存也能正常使用。
2.后端原先是在callbackUrl返回的status===2(文档已准备好保存)时做文件更新操作,发现只有等待10s后再次打开才能显示编辑保存后的文档,因为它在编辑文档关闭后 10 秒 触发,后来后端改成了在callbackUrl返回的status===6(正在编辑文档,但保存了当前文档状态)时做了文件更新操作,因为默认编辑文档会自动保存,所有不用担心未保存问题,最后效果正常了。
3.后端callbackUrl接口返回值一定要是"{\"error\":0}",表示接口没有错,不然会提示这份文件无法保存。请检查连接设置或联系您的管理员当你点击“OK“按钮,系统将提示您下载文档

编辑和预览word,跳转到onlyoffice页面,携带不同参数用于生成onlyoffice的配置即可

   // 编辑,跳转到onlyoffice页面
   handleEdit() {
      let routeData = this.$router.resolve({
        path: '/onlyoffice',
      });
      window.open(
        routeData.href +
          '?id=' +
          this.fileId +
          '&openType=edit',
        '_blank'
      );
    },
    // 预览,跳转到onlyoffice页面
    handleView() {
      let routeData = this.$router.resolve({
        path: '/fileinfo',
      });
      window.open(
        routeData.href +
          '?id=' +
          this.fileId,
        '_blank'
      );
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/754742.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序根据蓝牙RSSI信号强度测试设备距离

背景 在做小程序连接蓝牙设备的时候&#xff0c;有需求表明在搜索到0.5米之内的设备时自动连接 问题&#xff1a; 蓝牙模组只提供了RSSI信号强度&#xff0c;那又该如何计算蓝牙设备距离小程序的距离呢&#xff1f; 解决方案 通过以下公式做大量测试&#xff1a;求 A、n 的平均…

【深度学习】卷积神经网络CNN

李宏毅深度学习笔记 图像分类 图像可以描述为三维张量&#xff08;张量可以想成维度大于 2 的矩阵&#xff09;。一张图像是一个三维的张量&#xff0c;其中一维代表图像的宽&#xff0c;另外一维代表图像的高&#xff0c;还有一维代表图像的通道&#xff08;channel&#xff…

【LeetCode】四、栈相关:有效的括号 + 下一个更大的元素

文章目录 1、栈结构2、Java中的栈3、leetcode20&#xff1a;有效的括号4、leetcode496&#xff1a;下一个更大元素 1、栈结构 和队列相反&#xff0c;栈先进后出 时间复杂度&#xff1a;访问、插入、删除都在栈顶进行操作&#xff0c;时间复杂度为O(1)&#xff0c;搜索需要遍…

技术分享:分布式数据库DNS服务器的架构思路

DNS是企业数字化转型的基石。伴随微服务或单元化部署的推广&#xff0c;许多用户也开始采用分布式数据库将原来的单体数据库集群服务架构拆分为大量分布式子服务集群&#xff0c;对应不同的微服务或服务单元。本文将从分布式数据库DNS服务器的架构需求、架构分析两方面入手&…

2.用BGP对等体发送路由

2.用BGP对等体发送路由 实验拓扑&#xff1a; 实验要求&#xff1a;用BGP对等体发送路由信息 实验步骤&#xff1a; 1.完成基本配置&#xff08;略&#xff09; 2.建立BGP对等体&#xff08;略&#xff09; 3.创建路由信息&#xff08;用创建一个loop back接口就能产生一个直连…

【java】【控制台】【javaSE】 初级java家教管理系统控制台命令行程序项目

更多项目点击&#x1f446;&#x1f446;&#x1f446;完整项目成品专栏 【java】【控制台】【javaSE】 初级java家教管理系统控制台命令行程序项目 获取源码方式项目说明&#xff1a;功能点数据库涉及到&#xff1a; 项目文件包含&#xff1a;项目运行环境 &#xff1a;截图其…

HarmonyOS Next开发学习手册——弹性布局 (Flex)

概述 弹性布局&#xff08; Flex &#xff09;提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。 容器默认存在主轴与交叉轴&#xff0c;子元素默认沿主轴排列&#xff0c;子元素在主轴…

网络流-EK算法(保姆级教学)

本文引用董晓算法的部分图片。 一些不能带入纸质资料的竞赛&#xff0c;网络流纳入考纲。 因为需要默写&#xff0c;想来也不会考默写dinic这种算法难倒大家&#xff0c;只需要快速敲对EK算法就行了。 EK算法能在O(n*m^2)的复杂度内解决最大流问题&#xff0c;其中最大流就是…

Flutter循序渐进==>封装、继承、多态、抽象类以及属性修改

导言 新学一门编程语言&#xff0c;最难以理解的莫过于类了。如果类没用&#xff0c;也就算了&#xff0c;它偏偏很有用&#xff0c;我们必须得掌握&#xff0c;不然怎么好意思说自己会面向对象编程呢? 抽象类&#xff08;Abstract Class&#xff09;在面向对象编程中扮演着…

如何看待AIGC中漫画版权争议?( 计育韬老师高校公益巡讲答疑实录2024)

这是计育韬老师第 8 次开展面向全国高校的新媒体技术公益巡讲活动了。而在每场讲座尾声&#xff0c;互动答疑环节往往反映了高校师生当前最普遍的运营困境&#xff0c;特此计老师在现场即兴答疑之外&#xff0c;会尽量选择有较高价值的提问进行文字答疑梳理。 *本轮巡讲主题除了…

java 操作 milvus 2.1.4

1. 确认 docker 运行的 milvus容器镜像版本情况&#xff1a; 2. pom 依赖&#xff1a; <dependency><groupId>io.milvus</groupId><artifactId>milvus-sdk-java</artifactId><version>2.1.0</version><exclusions><exclusi…

【秋招突围】2024届秋招笔试-科大笔试题-01-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 &#x1f4d6…

在Tomcat中部署war包

1、准备war包 确保已经有一个有效的war包&#xff0c;该war包包含了web应用程序的所有内容&#xff1b; 2、停止tomcat服务器 在部署之前&#xff0c;确保tomcat服务器已经停止&#xff0c;进入tomcat的配置目录执行命令&#xff1a;[路径]/tomcat/conf&#xff1b; 在Linux…

前端vite+vue3——利用环境变量和路由区分h5、pc模块打包(从0到1)

⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享 前端vitevue3——利用环境变量和路由对前端区分h5和pc模块打包&#xff08;从0到1&#xff09;。 背景&#xff1a; 前端本地开发pc和h5的项目&#xff0c;发布时需要区分开h5和pc的页面 vite Vite 通过在一开始将应…

论文阅读--《FourierGNN:从纯图的角度重新思考多元时间序列预测》

Yi K, Zhang Q, Fan W, et al. FourierGNN: Rethinking multivariate time series forecasting from a pure graph perspective[J]. Advances in Neural Information Processing Systems, 2024, 36. 本次介绍的文章来自NeurIPS 2023&#xff0c;关于多变量时间序列的预测 摘要…

CocosCreator构建IOS的wwise教程

CocosCreator构建IOS教程 添加wwise教程: 1.添加include 2.添加SoundEngine 3.添加Profile-iphoneos下面lib下面的.a 4.导入js调用C++的文件 5.导入这些文件 6.初始化ios绝对路径和TTS语音合成对象 6.获得根目录绝对路径,加载pck需要找到绝对路径。怎么找绝对路径? #impor…

现如今软考通过率真的很低吗?

刚开始机考&#xff0c;10个人中有3个人表示想要尝试考试&#xff0c;这样通过率能高吗&#xff1f;就拿PMP证书来说吧&#xff0c;一下子就得花费三千多块&#xff0c;有几个人会轻易去尝试呢&#xff1f; 说到底&#xff0c;考试的难度是一个方面&#xff0c;考试的成本低是…

vue3日历选择器

倒叙日历&#xff1a; <template><div class"date-picker"><div class"column" wheel"onYearScroll"><div v-for"(year, index) in displayedYears" :key"index" :class"{current: year current…

深度解析RocketMq源码-消费者索引ConsumeQueue

1.绪论 rocketmq的broker中关于消息持久化的组件主要包含三个&#xff0c;分别是&#xff1a;持久化消息到文件中的组件commitLog&#xff1b;根据消息key索引commitLog日志的indexFile&#xff1b;消费者根据topic和queueId查询commitLog日志的consumeQueue。前面已经介绍com…

Profibus协议转profinet协议网关模块连接电机保护器与PLC通讯

一、背景 工业通讯中常见的协议有&#xff1a;Modbus协议&#xff0c;ModbusTCP协议&#xff0c;Profinet协议&#xff0c;Profibus协议&#xff0c;Profibus DP协议&#xff0c;EtherCAT协议&#xff0c;EtherNET协议等在现代工业控制系统中具有重要的角色。而Profibus协议转…