vue+onlyOffice+java : 集成在线编辑word并保存

1.docker部署onlyOffice

1.1拉取最新版onlyOffice镜像

sudo docker pull onlyoffice/documentserver

1.2运行以下命令运行容器

其中  -v 后的第一部分是挂载自己的linux的哪个目录

# 启动docker容器，默认启动端口为80，可以进行修改
docker run -i -t -d -e TZ="Asia/Shanghai" -p 6831:80 --restart=always \-v /usr/local/docker/document/logs:/var/log/onlyoffice  \-v /usr/local/docker/document/data:/var/www/onlyoffice/Data  \-v /usr/local/docker/document/lib:/var/lib/onlyoffice \-v /usr/local/docker/document/db:/var/lib/postgresql  onlyoffice/documentserver

运行完容器后开始编写代码

2.前端vue代码：

2.1public文文件夹下index.html引入对应的脚本

其中的ip地址和端口改成自己的

<script type='text/javascript' src='http://192.168.59.164:6831/web-apps/apps/api/documents/api.js'></script>

2.2 vue组件代码

<!--onlyoffice 编辑器-->
<template><div id='vabOnlyOffice'></div>
</template><script>
export default {name: 'VabOnlyOffice',props: {option: {type: Object,default: () => {return {}},},},data() {return {doctype: '',docEditor: null,}},beforeDestroy() {if (this.docEditor !== null) {this.docEditor.destroyEditor();this.docEditor = null;}},watch: {option: {handler: function(n) {this.setEditor(n)this.doctype = this.getFileType(n.fileType)},deep: true,},},mounted() {if (this.option.url) {this.setEditor(this.option)}},methods: {async setEditor(option) {if (this.docEditor !== null) {this.docEditor.destroyEditor();this.docEditor = null;}this.doctype = this.getFileType(option.fileType)let config = {document: {//后缀fileType: option.fileType,key: option.key ||'',title: option.title,permissions: {edit: option.isEdit,//是否可以编辑: 只能查看，传falseprint: option.isPrint,download: false,// "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。// "review": true //跟踪变化},url: option.url,},documentType: this.doctype,editorConfig: {callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置lang: option.lang,//语言设置//定制customization: {autosave: false,//是否自动保存chat: false,comments: false,help: false,// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false//是否显示插件plugins: false,},user:{id:option.user.id,name:option.user.name},mode:option.model?option.model:'edit',},width: '100%',height: '100%',token:option.token||''}// eslint-disable-next-line no-undef,no-unused-varsthis.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)},getFileType(fileType) {let docType = ''let fileTypesDoc = ['doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',]let fileTypesCsv = ['csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',]let fileTypesPPt = ['fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',]if (fileTypesDoc.includes(fileType)) {docType = 'text'}if (fileTypesCsv.includes(fileType)) {docType = 'spreadsheet'}if (fileTypesPPt.includes(fileType)) {docType = 'presentation'}return docType}},
}
</script>

 2.3父组件中开始引用

 要记得注册组件

 <div class='qualityManual-container'><el-dialog :visible.sync="openOffice" width="800px" height="800px" append-to-body ><div  class='qualityManual-container-office'><only-office :option='option' /></div></el-dialog></div>

对应的data中的属性：

 openOffice:false,//参考vabOnlyOffice组件参数配置option: {key:"",url: '',isEdit: '',fileType: '',title: '',lang: '',isPrint: '',user: { id:null,name:''}},

对应的method中添加方法（这个方法可以在需要的地方引用）：

需要注意的是，这里的ip必须这样填（自己天自己的），因为作为docker运行的onlyoffice，需要这样访问本地linux服务器中的服务程序

注：（自己在本地测试时无法通过localhost进行测试运行）

 modifyTem(row){this.getFile(row.id)},getFile(id) {this.openOffice =  truethis.show = false// getAction('/file/selectById', { id: this.id }).then(res => {this.option.isEdit = true
//  https://dsgrcdnblobprod5u3.azureedge.net/catalog-assets/zh-cn/a32a147f-1f69-4fd5-8a39-c25b2a0093e8/tf67429532_wac-987650ec15fa.docxthis.option.lang = 'zh-CN'this.option.url = 'http://192.168.59.164:8080/notemode/notemodeltypeenum/download/'+idthis.option.title = '笔录模板'this.option.fileType = 'docx'this.option.isPrint = falsethis.option.user= { id:12,name:'张三'}this.option.editUrl = "http://192.168.59.164:8080/notemode/notemodeltypeenum/save/"+id// this,option.key="11111"// })},close() {this.show = false},

对应的样式

<style >
.qualityManual-container-office {width: 100%;      /* 确保容器宽度充满整个父元素 */height: 800px;    /* 根据需要调整高度 */overflow: hidden; /* 避免内部内容溢出 */
}</style>

3.对应的后端代码

1.dowload 方法是作为流进行文件数据的返回

2.save方法是对在线编辑后对于word的保存回调方法，在vue中有对应url回调地址的设置选项

注意：回调的时候，onlyOffice是通过一个地址（url）让你进行去下载。

有一些是测试时的代码，没有删掉，请大家注意甄别。

 @GetMapping("/download/{id}")public void download(@PathVariable("id")Long id, HttpServletRequest request, HttpServletResponse response) throws Exception {Notemodeltypeenum notemodeltypeenum = notemodeltypeenumService.selectNotemodeltypeenumByID(id);String filePath = "/a.docx";int profileIndex = notemodeltypeenum.getContentStr().indexOf("/profile") + "/profile".length();String subPath = notemodeltypeenum.getContentStr().substring(profileIndex);filePath = RuoYiConfig.getProfile()+subPath;//本地文件
//        String configPath = RuoYiConfig.getAttachPath();
//        filePath = configPath + attachment.getVirtualpath();File file = new File(filePath);if (file.exists()) {//            String filename = attachment.getFilename();response.setContentType("application/octet-stream");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("a.docx", "utf-8"));response.setCharacterEncoding("utf-8");response.setContentLength((int) file.length());byte[] buff = new byte[(int) file.length()];BufferedInputStream bufferedInputStream = null;OutputStream outputStream = null;try {outputStream = response.getOutputStream();bufferedInputStream = new BufferedInputStream(new FileInputStream(file));int i = 0;while ((i = bufferedInputStream.read(buff)) != -1) {outputStream.write(buff, 0, i);outputStream.flush();}} catch (IOException e) {e.printStackTrace();} finally {try {bufferedInputStream.close();} catch (IOException e) {e.printStackTrace();}}}}@PostMapping("/save/{id}")public void save(@PathVariable("id")Long id,@RequestParam Map<String, String> map, HttpServletRequest request, HttpServletResponse response) {Notemodeltypeenum notemodeltypeenum = notemodeltypeenumService.selectNotemodeltypeenumByID(id);PrintWriter writer = null;String body = "";try {writer = response.getWriter();Scanner scanner = new Scanner(request.getInputStream());scanner.useDelimiter("\\A");body = scanner.hasNext() ? scanner.next() : "";scanner.close();} catch (Exception ex) {writer.write("get request.getInputStream error:" + ex.getMessage());return;}if (body.isEmpty()) {throw new GlobalException("ONLYOFFICE回调保存请求体未空");}JSONObject jsonObj = JSONObject.parseObject(body);int status = (Integer) jsonObj.get("status");int saved = 0;String key = jsonObj.get("key").toString();if (status == 2 || status == 3 || status == 6) //MustSave, Corrupted{String downloadUri = (String) jsonObj.get("url");System.out.println(downloadUri);try {String fileName = generateUniqueFileName(extractFileName(notemodeltypeenum.getContentStr()));String savePath = RuoYiConfig.getProfile()+"/"+fileName;downloadFile(downloadUri,savePath);// 更新原数据的文件地址String s = replacePathAfterProfile(notemodeltypeenum.getContentStr(), "/" + fileName);notemodeltypeenum.setContentStr(s);notemodeltypeenumService.updateNotemodeltypeenum(notemodeltypeenum);} catch (Exception ex) {saved = 1;ex.printStackTrace();}}writer.write("{\"error\":" + saved + "}");}public static void downloadFile(String fileUrl, String saveDir) {try {URL url = new URL(fileUrl);URLConnection connection = url.openConnection();// 5000 milliseconds is an example timeout valueconnection.setConnectTimeout(5000);connection.setReadTimeout(5000);try (BufferedInputStream in = new BufferedInputStream(connection.getInputStream());FileOutputStream fileOutputStream = new FileOutputStream(saveDir)) {byte[] dataBuffer = new byte[1024];int bytesRead;while ((bytesRead = in.read(dataBuffer, 0, 1024)) != -1) {fileOutputStream.write(dataBuffer, 0, bytesRead);}}System.out.println("File downloaded successfully: " + saveDir);} catch (IOException e) {System.out.println("Error downloading the file: " + e.getMessage());e.printStackTrace();}}
//
//    public static void main(String[] args) {
//        downloadFile("https://dsgrcdnblobprod5u3.azureedge.net/catalog-assets/zh-cn/a32a147f-1f69-4fd5-8a39-c25b2a0093e8/tf67429532_wac-987650ec15fa.docx","D:/新建文件夹/87650ec15fa.docx");
//    }public static String generateUniqueFileName(String originalFilename) {String fileExtension = ""; // 文件扩展名int i = originalFilename.lastIndexOf('.');if (i > 0) {fileExtension = originalFilename.substring(i);}return UUID.randomUUID().toString() + fileExtension; // 生成带有扩展名的唯一文件名}public static String extractFileName(String url) {// 检查url是否为空if (url == null || url.isEmpty()) {return "";}// 查找最后一个斜杠的位置int lastIndex = url.lastIndexOf('/');if (lastIndex == -1) {return ""; // 如果没有找到斜杠，返回空字符串}// 从最后一个斜杠之后的位置开始提取子字符串return url.substring(lastIndex + 1);}public static String replacePathAfterProfile(String url, String newPath) {if (url == null || url.isEmpty()) {return url; // 或抛出异常，取决于你的错误处理策略}// 找到"profile"后的第一个斜杠的索引int profileIndex = url.indexOf("/profile");if (profileIndex == -1) {return url; // 如果找不到"profile"，返回原始URL}// 计算"profile"之后的部分开始的索引int startReplaceIndex = profileIndex + "/profile".length();// 构造新的URLreturn url.substring(0, startReplaceIndex) + newPath;}

参考文章：

onlyoffice+vue实现在线预览在线编辑_onlyoffice vue-CSDN博客 

SpringBoot集成onlyoffice实现word文档编辑保存-阿里云开发者社区 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[补题记录] StarryCoding 入门教育赛3 D.电弧陷阱

[补题记录] StarryCoding 入门教育赛3 D.电弧陷阱

URL&#xff1a;小白教育赛3 题目描述 劳 e e e和桶子在打派的时候被一个艾许的电弧陷阱控在原地动弹不得&#xff0c;于是他们想办法找出哪些地方是可以去的&#xff0c;哪些地方是不能去的。 给定一个由字符构成的 N ∗ M N * M N∗M的矩阵&#xff0c;其中包括&#xff1…
阅读更多...
Python 中的 Lambda 函数：简单、快速、高效

Python 中的 Lambda 函数：简单、快速、高效

大家好&#xff0c;今天再给大家介绍一个python的一个强大工具Lambda 函数&#xff0c;它允许你快速定义简单的匿名函数。这种函数是“匿名的”&#xff0c;因为它们不需要像常规函数那样被明确命名。 在本文中&#xff0c;我们将通过清晰的解释和实用的示例&#xff0c;深入了…
阅读更多...
基于GIS地理技术+智慧巡检解决方案(Word原件)

基于GIS地理技术+智慧巡检解决方案(Word原件)

传统的巡检采取人工记录的方式&#xff0c;该工作模式在生产中存在很大弊端&#xff0c;可能造成巡检不到位、操作失误、观察不仔细、历史问题难以追溯等现象&#xff0c;使得巡检数据不准确&#xff0c;设备故障隐患得不到及时发现和处理。因此建立一套完善的巡检管理系统是企…
阅读更多...
Redis 数据操作与故障排除指南

Redis 数据操作与故障排除指南

Redis 是一个高性能的键值数据库&#xff0c;广泛用于缓存、会话管理等多种场景。当你在使用 Redis 时遇到 nil 值或其他问题&#xff0c;可能是因为你没有正确地定位到数据所在的数据库或节点。本文将帮助你理解如何在 Redis Cluster 或多数据库环境中正确操作和解决常见问题。…
阅读更多...
【2022 深圳 ArchSummit 】大数据架构稳定性保障实践

【2022 深圳 ArchSummit 】大数据架构稳定性保障实践

文章目录 一、前言二、现状三、大数据架构的历史变迁&#xff08;一&#xff09;洪荒期&MR&#xff08;二&#xff09;远古期&MPP&#xff08;四&#xff09;近现代&Flink/Spark&#xff08;五&#xff09;现如今&实时数据湖架构 四、架构稳定的关键因素&#…
阅读更多...
编程式导航

编程式导航

目录 一、问题引入 二、基本跳转 1.path路径跳转&#xff08;简易方便&#xff09; 2.name命名路由跳转&#xff08;适合path路径长的场景&#xff09; 三、路由传参 1.path路径跳转传参 &#xff08;1&#xff09;query传参 &#xff08;2&#xff09;动态路由传参 2.…
阅读更多...
C语言UDP网络编程

C语言UDP网络编程

目录 1. C语言UDP编程简介 1.1 背景与意义 1.2 UDP协议简介 1.3 C语言在网络编程中的应用 2. UDP网络编程基础 2.1 套接字编程概念 2.2 UDP套接字创建与绑定 2.3 数据发送与接收 2.4 关闭套接字 3. C语言UDP编程实例 3.1 简单聊天室 3.2 文件传输程序 3.3 广播消息…
阅读更多...
后端返回文件流格式，前端vue 导出下载表格

后端返回文件流格式，前端vue 导出下载表格

//日期时间格式化 export const formatDate (edate, type) > { var date new Date(edate); var year date.getFullYear(); //年 var month date.getMonth() 1 < 10 ? "0" (date.getMonth() 1) : date.getMonth() 1; //月 var day date.getDate() &l…
阅读更多...
家装新宠！装修APP开发解决方案，为业主提供全新装修模式

家装新宠！装修APP开发解决方案，为业主提供全新装修模式

随着人们对家庭装修的需求度越来越高&#xff0c;装修APP开发也随之出现。如今装修APP开发可实现互联网与传统家装行业的信息结合&#xff0c;由传统的家装行业广告模式向移动端的互联网模式进行转移&#xff0c;实现传统家装行业与互联网的相辅相成&#xff0c;以此来推动家装…
阅读更多...
电商核心技术揭秘54： 粉丝经济的挖掘与利用

电商核心技术揭秘54： 粉丝经济的挖掘与利用

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 电商技术揭秘四十一&#xff1a;电商平台的营销系统浅析 电商技术揭秘四十二&#…
阅读更多...
2024年华为OD机试真题-螺旋数字矩阵-C++-OD统一考试（C卷D卷）

2024年华为OD机试真题-螺旋数字矩阵-C++-OD统一考试（C卷D卷）

题目描述： 疫情期间，小明隔离在家，百无聊赖，在纸上写数字玩。他发明了一种写法： 给出数字个数n和行数m（0 < n ≤ 999，0 < m ≤ 999），从左上角的1开始，按照顺时针螺旋向内写方式，依次写出2,3...n，最终形成一个m行矩阵。 小明对这个矩阵有些要求： 1.每行数字的…
阅读更多...
一、数据结构的三要素

一、数据结构的三要素

数据的存储结构&#xff1a;顺序&#xff08;物理位置相邻&#xff09;、链式&#xff08;物理位置不相邻&#xff09;、索引&#xff08;还需要建立索引表&#xff09;、散列&#xff08;根据关键字直接计算出该元素的存储地址又称为hash存储&#xff09;、 时间复杂度&#x…
阅读更多...
接口(Interface)和抽象类(Abstract Class)编程思想

接口(Interface)和抽象类(Abstract Class)编程思想

目录 抽象类(Abstract Class)编程思想 接口(Interface)编程思想 接口（Interface）和抽象类（Abstract Class）是面向对象编程（OOP）中的两个重要概念，它们都是用于实现代码重用和定义共同行为的方式，但各自有其独特的应用场景和编程思想。 抽象类(Abstract Class)编程思…
阅读更多...
6.5.Docker数据管理和端口映射应用

6.5.Docker数据管理和端口映射应用

文章目录 实战总体步骤案例1:安装tomcat&#xff08;端口映射使用&#xff09;案例2:安装mysql&#xff08;数据卷应用&#xff09;测试版实战版 案例3:安装Redis&#xff08;数据卷应用&#xff09; 实战总体步骤 搜索镜像 可以在Dockerhub中查看容器如何使用&#xff0c;包括…
阅读更多...
js原生三种弹框

js原生三种弹框

第一种&#xff1a; alert("提示内容")&#xff1a;提示弹框&#xff1b; alert("提示"); 第二种&#xff1a; prompt("内容","输入框默认值")&#xff1a;输入弹框&#xff0c;第一个值输入框提示内容&#xff0c;第二个值输入框默…
阅读更多...
23种设计模式——责任链

23种设计模式——责任链

责任链模式是一种行为设计模式&#xff0c;它允许将请求沿着处理链传递&#xff0c;直到有一个处理者能够处理该请求为止。责任链模式将请求的发送者和接收者解耦&#xff0c;使得多个对象都有机会处理请求&#xff0c;同时也可以动态地组织和修改处理链。 在责任链模式中&…
阅读更多...
【SpringSecurity源码】过滤器链加载流程

【SpringSecurity源码】过滤器链加载流程

theme: smartblue highlight: a11y-dark 一、前言及准备 1.1 SpringSecurity过滤器链简单介绍 在Spring Security中&#xff0c;过滤器链&#xff08;Filter Chain&#xff09;是由多个过滤器&#xff08;Filter&#xff09;组成的&#xff0c;这些过滤器按照一定的顺序对进…
阅读更多...
AI绘画Stable Diffusion 插件篇：智能标签提示词插件sd-danbooru-tags-upsampler

AI绘画Stable Diffusion 插件篇：智能标签提示词插件sd-danbooru-tags-upsampler

大家好&#xff0c;我是向阳。 关于智能标签提示词插件&#xff0c;在很早之前就介绍过很多款了&#xff0c;今天再给大家介绍一款智能标签提示词插件sd-danbooru-tags-upsampler。该智能提示词插件是今年2月23号才发布的第一版V0.1.0&#xff0c;算是比较新的智能提示词插件。…
阅读更多...
简化多容器应用部署：深入理解 Docker Compose

简化多容器应用部署：深入理解 Docker Compose

Docker Compose 已成为现代应用开发和部署的核心工具之一。它为开发者提供了一种简单且高效的方式来定义、运行和管理多容器应用程序。无论是在本地开发环境还是生产环境中&#xff0c;Docker Compose 都能够帮助开发团队快速搭建、部署和扩展复杂的应用系统。本文将深入探讨 D…
阅读更多...
第100+7步 ChatGPT文献复现：ARIMA-GRNN预测出血热

第100+7步 ChatGPT文献复现：ARIMA-GRNN预测出血热

基于WIN10的64位系统演示 一、写在前面 这一次&#xff0c;我们来解读ARIMA-GRNN组合模型文章&#xff0c;也是老文章了&#xff1a; 《PLoS One》杂志的2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal…
阅读更多...
最新文章

Copyright @ 2022~2023