onlyoffice在线预览和编辑（编辑后续研究）

文档：基本概念 |唯一办公室 (onlyoffice.com)

安装docker

1. 安装工具包

yum install -y yum-utils device-mapper-persistent-data lvm2

yum-config-manager --add-repo https://mirrors.aliyun.com/dockerce/linux/centos/docker-ce.repo

yum install -y docker-ce

systemctl start docker

systemctl status docker

安装onlyoffice

需要外网访问

阿里镜像什么没有用

docker pull onlyoffice/documentserver

启动容器

docker run -d \

--name onlyoffice-docs \

-p 19001:80 \

onlyoffice/documentserver

关闭防火墙

停止 firewalld 服务

systemctl stop firewalld

验证状态（显示 inactive 即已关闭）

systemctl status firewalld

停止服务并禁用开机自启

systemctl stop firewalld

systemctl disable firewalld

验证禁用状态（输出 disabled 即生效）

systemctl is-enabled firewalld

开始使用

访问welcone

http://192.168.21.95:19001/

查看自动生成的JWT

sudo docker exec onlyoffice-docs /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string'

查看管理员首次密钥

docker logs onlyoffice-docs | grep -i "bootstrap"

第一次可以尝试关闭jwt

docker exec -it onlyoffice-docs bash

nano /etc/onlyoffice/documentserver/local.json

这种奇奇怪怪的都false了。

前端页面配置

<template>
  <div>
    <el-button @click="preview">预览</el-button>
    <div id="placeholder" style="width: 100%; height: 900px;"></div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Preview",

  methods: {
    async preview() {
      var docKey = Date.now() + "-" + Math.random().toString(36).substring(2, 8);
      docKey = '1733286322333-abc123'

      // OnlyOffice config（不含 token）
      const config = {
        width: "100%",
        height: "900px",
        document: {
          key: docKey,
          url: "https://xxx.xxx.com:8809/xxx-xxxxx",
          title: "demo.docx",
          fileType: "docx",
          permissions: { edit: false }
        },
        documentType: "word",
        editorConfig: {
          mode: "view",
          user: {
            id: "pb,
            name: "pb"
          }
        }
      };

// 转换为 JSON 字符串
      const jsonString = JSON.stringify(config);
      console.log(jsonString);

      const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aWR0aCI6IjEwMCUiLCJoZWlnaHQiOiI5MDBweCIsImRvY3VtZW50Ijp7ImtleSI6IjE3MzMyODYzMjIzMzMtYWJjMTIzIiwidXJsIjoiaHR0cHM6Ly9pdHByZS52YXp5bWUuY29tOjg4MDkvdmF6eW1lLWJjL2FwaS9jaGF0L3BlcnNvbi9kYXRhYmFzZUZpbGUvZ2V0RmlsZS8xNDAwIiwidGl0bGUiOiJkZW1vLmRvY3giLCJmaWxlVHlwZSI6ImRvY3giLCJwZXJtaXNzaW9ucyI6eyJlZGl0IjpmYWxzZX19LCJkb2N1bWVudFR5cGUiOiJ3b3JkIiwiZWRpdG9yQ29uZmlnIjp7Im1vZGUiOiJ2aWV3IiwidXNlciI6eyJpZCI6InBlbmdiaW4wMUB2YXp5bWUuY29tIiwibmFtZSI6InBiIn19fQ.soJPmBzwuQMdzFSoK4DYupUy8yG649fEZFgOrt33Yvw'
      ;

      // 🔥 组装最终配置
      config.token = token;

      new DocsAPI.DocEditor("placeholder", config);
    }
  }
};
</script>

因为本地是http的，而且建议后台生成jwt

@SneakyThrows
    @Test
    void GenerateOnlyOfficeJWT (){
        // ============================
        // 1. ONLYOFFICE config（不包含 token 字段）
        // ============================
        String configJson = "{}";

        // ============================
        // 2. your secret（local.json 相同）
        // ============================
        String secret = "z4rdC9kgqgMleZahoqmZU4lQs0exGTnF";

        // JSON → Map
        ObjectMapper mapper = new ObjectMapper();
        Map<String, Object> payload = mapper.readValue(configJson, Map.class);

        // ============================
        // 3. 生成 JWT（HS256）
        // ============================
        String jwt = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                .setClaims(payload)
                .signWith(SignatureAlgorithm.HS256, secret.getBytes())
                .compact();

        System.out.println("\n===== ONLYOFFICE JWT 创建成功 =====");
        System.out.println(jwt);
    }

再把生成的jwt放入前端，就可以使用了