在线文档协同办公-开箱即用demo

news2024/12/24 21:00:07

在线文档协同办公-开箱即用demo

  • 服务安装(略)
  • 下面开始集成
    • 打开文件
    • 保存文件
    • 共同编辑
  • 展示一下集成后的效果图

服务安装(略)

这里可以参考前几篇博客内容
Linux版
windows版

下面开始集成

打开文件

1.创建一个空的html文件。
添加div元素,如下所示。

<div id="placeholder"></div>

2.使用将用于您的网站的 JavaScript API 指定您的文档服务器链接。

<script type="text/javascript" src="文档服务器链接"></script>

3.添加脚本,使用要打开的文档的配置为 div 元素 初始化文档编辑器。
new DocsAPI.DocEditor( “placeholder” , {
“document” : {
“fileType” : “docx” ,
“key” : “Khirz6zTPdfd7” ,
“title” : “Example Document Title.docx” ,
“url” : “https: //example.com/url-to-example-document.docx”
}, “documentType” : “word”
});
4.在浏览器中打开您的html文件。

保存文件

1.在文档编辑器初始化的配置脚本中,使用参数行中的回调处理程序指定文件的 URL

new DocsAPI.DocEditor( "placeholder" , {
     "document" : {
         "fileType" : "docx" ,
         "key" : "Khirz6zTPdfd7" ,
         "title" : "Example Document Title.docx" ,
         "url" : "https: //example.com/url-to-example-document.docx"
    },
    "documentType":"word",
     "editorConfig":{
         "callbackUrl":"https://example.com/url-to-callback.ashx"
    }
});

2.回调示例(也可参考源码中的)
java

public class IndexServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter writer = response.getWriter();

        Scanner scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");
        String body = scanner.hasNext() ? scanner.next() : "";

        JSONObject jsonObj = (JSONObject) new JSONParser().parse(body);

        if((long) jsonObj.get("status") == 2)
        {
            String downloadUri = (String) jsonObj.get("url");

            URL url = new URL(downloadUri);
            java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
            InputStream stream = connection.getInputStream();

            File savedFile = new File(pathForSave);
            try (FileOutputStream out = new FileOutputStream(savedFile)) {
                int read;
                final byte[] bytes = new byte[1024];
                while ((read = stream.read(bytes)) != -1) {
                    out.write(bytes, 0, read);
                }

                out.flush();
            }

            connection.disconnect();
        }
        writer.write("{\"error\":0}");
    }
}

共同编辑

##参考图和以下步骤说明了在文档服务器中共同编辑文档的过程。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HnOI7DGy-1670305691236)(img_2.png)]
1.用户 1 和用户 2 在文档编辑器中打开了一个相同的文档,即打开文件时使用了相同的document.key。
2.用户 1 对打开的文档进行更改。
3.文档编辑器将用户 1 所做的更改发送到文档编辑服务。
4.文档编辑服务将用户 1 所做的更改发送给用户 2文档编辑器。
5.现在这些更改对用户 2 可见。
##示例
1.创建一个空的html文件。
添加div元素,如下所示。

<div id="placeholder"></div>

2.使用将用于您的网站的 JavaScript API 指定您的文档服务器链接。

<script type="text/javascript" src="文档服务器链接"></script>

3.添加脚本,使用要打开的文档的配置为 div 元素 初始化文档编辑器

new DocsAPI.DocEditor( "placeholder" , {
     "document" : {
         "fileType" : "docx" ,
         "key" : "Khirz6zTPdfd7" ,
         "title" : "Example Document Title.docx" ,
         "url" : "https: //example.com/url-to-example-document.docx"
    },
    "documentType":"word",
     "editorConfig":{
         "user":{
             "id":"78e1e841",
             "name":"John Smith"
        }
    }
});

4.在浏览器中打开您的html文件。
5.现在复制上面创建的html文件。
6.在复制的html文件中更改初始化文档编辑器的脚本。

new DocsAPI.DocEditor( "placeholder" , {
     "document" : {
         "fileType" : "docx" ,
         "key" : "Khirz6zTPdfd7" ,
         "title" : "Example Document Title.docx" ,
         "url" : "https: //example.com/url-to-example-document.docx"
    },
    "documentType":"word",
     "editorConfig":{
         "user":{
             "id":"F89d8069ba2b",
             "name":"Kate Cage"
        }
    }
});

展示一下集成后的效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python匿名函数和高阶函数总结

bilibili 千峰python 学习笔记 匿名函数 lambda函数的语法只包含一个语句&#xff0c;如下&#xff1a; lambda 参数列表: 运算表达式Lambda函数能接收任何数量的参数但只能返回一个表达式的值匿名函数可以执行任意表达式(甚至print函数)&#xff0c;但是一般认为表达式应该有…

UDP-B-L-阿拉伯糖二钠盐,UDP-b-L-arabinopyranose disodium salt,15839-78-8

产品名称&#xff1a;UDP-B-L-阿拉伯糖二钠盐 英文名称&#xff1a;UDP-b-L-arabinopyranose disodium salt CAS号&#xff1a;15839-78-8 分子式&#xff1a;C14H22N2O16P2 分子量&#xff1a;536.27600 产地&#xff1a;西安 规格&#xff1a;1mg 5mg 10mg 纯度&#xff1…

西门子CT重建算法

相对于MR&#xff0c;CT在参数及扫描方面并不是太难&#xff0c;但是CT的图像重建及各种算法则是非常难的&#xff0c;也是比较抽象的。这篇文章介绍CT图像重建算法等相关内容。 CT技术是CT诊断的基础&#xff0c;帮助医务工作者充分掌握CT技术是我们的责任和义务&#xff01; …

Redis原理 - 对象的数据结构(SDS、Inset、Dict、ZipList、QuickList、SkipList、RedisObject)

Redis数据结构 1. SDS Redis 是用 C 语言写的&#xff0c;但是对于 Redis 的字符串&#xff0c;却不是 C 语言中的字符串&#xff08;即以空字符’\0’结尾的字符数组&#xff09;&#xff0c;它是自己构建了一种名为 简单动态字符串&#xff08;simple dynamic string,SDS&am…

如何在ios成功上架android tv?​

如果你是新手&#xff0c;将在这里清晰发布到App Store整个上架流程&#xff0c;还有相应的流程解决方案。​ 如果你上架过iOS APP&#xff0c;这里会了解到有更快捷的上架过程。​ 上架iOS最基本需要一个付费的开发者账号&#xff0c;还没有的话申请一个或者借用。​ 通常也…

7.springboot中整合Jpa多数据源

Springboot 整合spring data jpa多数据源 在使用Mybatis时会涉及多数据源的问题&#xff0c;同样&#xff0c;当我们使用Jpa作为持久化处理方式时&#xff0c;也会涉及多数据源的问题&#xff0c;本节我们来讲解一下Springboot如何整合Spring data Jpa多数据源。 1.创建项目 …

ARM基础(1):Cortex-M3的核心寄存器和特殊寄存器

Cortex-M3处理器的寄存器包括R0~R15和一些特殊的寄存器。其中R0到R12是通用寄存器&#xff0c;但是一些16位的Thumb指令只能访问R0到R7(低寄存器)&#xff0c;而32位的Thumb-2指令则可以访问所有这些寄存器。特殊寄存器只能通过特殊访问指令访问。 文章目录1 核心寄存器1.1 R13…

牛客网刷题【BC33、BC56、BC44、BC91、BC49、写函数求最大值】

目录 一、BC33 计算平均成绩 二、BC56 线段图案 三、BC44 判断整数奇偶型 四、BC91 成绩输入输出问题 五、BC49 判断两个数的大小关系 六、写函数&#xff0c;求最大值 一、BC33 计算平均成绩 #include <stdio.h>int main() {double score0;double sum0;int i…

VK1088B 22*4点 LCD液晶显示屏驱动IC,4*4MM超小体积,具省电模式,多用于超小型LCD段码屏显示驱动,FAE技术支持

产品品牌&#xff1a;永嘉微电/VINKA 产品型号&#xff1a;VK1088B 封装形式&#xff1a;QFN32&#xff08;4MM*4MM&#xff09; 概述&#xff1a; VK1088B是一个点阵式存储映射的LCD驱动器&#xff0c;可支持最大88点&#xff08;22SEGx4COM&#xff09;的LCD屏&#xff0c;也…

osgEarth示例分析——osgearth_featurequery

前言 osgearth_featurequery示例&#xff0c;分析了如何拾取地球上的特征&#xff0c;并对特征信息进行提取与显示。 执行命令&#xff1a;osgearth_featurequeryd.exe earth_image\china-simple.earth 需要注意的是&#xff1a;earth文件&#xff0c;必须有特征内容。否则无…

tkinter制做一个音乐下载小软件,多种音乐免费听

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 平常我们下载的歌曲&#xff0c;都是各种妖魔鬼怪的格式横行~ 想下载下来用一下都不行&#xff0c;还只能在它的播放器内听&#xff0c;这谁受得了~ 学Python是用来干嘛的&#xff1f; 当然是解…

929903-87-7,Ac-Arg-Leu-Arg-MCA

Ac-RLR-AMC, fluorogenic substrate for assaying the trypsin-like activity of purified proteasomes (Km 78 μM). Ac-RLR-AMC&#xff0c;荧光底物&#xff0c;用于测定纯化蛋白酶体的胰蛋白酶样活性(Km 78 μM)。 多肽荧光标记由于没有放射性&#xff0c;实验操作简单。…

高通平台开发系列讲解(AI篇)如何让MTCNN运行在SNPE

文章目录 一、使用到的工具二、环境配置2.1、Snpe的环境配置2.2、opencv的环境配置2.3、caffe的环境配置三、MTCNN网络组成四、基于SNPE运行MTCNN沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要介绍如何使用高通平台SNPE运行MTCNN。 一、使用到的工具 Ubunt…

MNN简介

一、轻量级高性能推理引擎 1.简介 MNN 是一个高效、轻量的深度学习框架。它支持深度模型推理与训练&#xff0c;尤其在端侧的推理与训练性能在业界处于领先地位。目前&#xff0c;MNN 已经在阿里巴巴的手机淘宝、手机天猫、优酷、钉钉、闲鱼等 20 多个 App 中使用&#xff0…

Vue/JS中定时器模拟随机指定范围、位数的小数并更新innerHTML以及页面被销毁时监听事件中销毁定时器

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行 Vue页面上某个弹窗内容是innerHTML动态拼接。 系统演示时需构造模拟数据&#xff0c;模拟出数…

CAXA 3D 实体设计2023 软件下载+补丁+安装教程

CAXA 3D 实体设计2023 软件下载补丁安装教程 软件下载链接&#xff1a;https://pan.baidu.com/s/1KQFTfBg1uim5AGmhryN7_A?pwdnopn 提取码&#xff1a;nopn CAXA 3D实体设计2023新增功能 1.3D曲线支持参数化约束 通过添加尺寸约束和几何约束实现对三维曲线的参数化驱动&…

基于java(ssm)人事考勤签到管理系统源码(java毕业设计)

基于java&#xff08;ssm&#xff09;人事考勤签到管理系统 人事考勤签到管理系统是基于java编程语言&#xff0c;mysql数据库&#xff0c;ssm框架&#xff0c;idea工具开发&#xff0c;本系统分为员工&#xff0c;部门经理&#xff0c;管理员三个角色&#xff0c;员工可以登陆…

超详细!旗舰SoC RK3588参数介绍-飞凌嵌入式

OK3568-C开发板RK3588是瑞芯微旗下最新的8K旗舰SoC芯片&#xff0c;采用ARM架构&#xff0c;主要用于PC、边缘计算设备、个人移动互联网设备和其他数字多媒体应用。 RK3588集成了四核Cortex-A76和四核Cortex-A55&#xff0c;以及单独的NEON协处理器&#xff0c;支持8K视频编解码…

图像处理基础知识

图像处理基础 自己学习整理的图像处理知识 视觉基本概念和直方图基本概念 文章目录图像处理基础基本概念视觉人类视觉概念人类视觉的特性机器视觉概念图像的感知直方图直方图的定义直方图的性质直方图的应用基本概念 视觉 人类视觉概念 人类视觉的特性 多义性 同一张图像可…

[附源码]Python计算机毕业设计Django项目管理系统的专家评审模块

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…