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地址和端口改成自己的

2.2 vue组件代码

 2.3父组件中开始引用

 要记得注册组件

对应的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 =  true
      this.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.docx
      this.option.lang = 'zh-CN'
      this.option.url = 'http://192.168.59.164:8080/notemode/notemodeltypeenum/download/'+id
      this.option.title = '笔录模板'
      this.option.fileType = 'docx'
      this.option.isPrint = false
      this.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
    },

对应的样式

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 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 value
            connection.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();
        // 构造新的URL
        return url.substring(0, startReplaceIndex) + newPath;
    }

参考文章：

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

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