自定义 Onlyoffice 配置

在 第一篇 中已经介绍了如何在 Vue.js 中接入 Onlyoffice，这里不再赘述。接下来自定义配置实现：编辑器语言设置为中文、添加当前编辑的用户信息、文档编辑后支持保存等。

还是那核心的三步，添加容器、引入入口 JS 文件、初始化 Onlyoffice 实例，前两步都不变，只是在第三步时，传入新的编辑器配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// 编辑器配置项，完整配置项参见：https://api.onlyoffice.com/editors/config/
const editorConfig = {
  // 编辑器宽度，也可以设置成百分比，不过要父容器设定具体宽度
  width: 1200,
  // 编辑器高度
  height: 800,
  // 编辑器类型，支持 word、cell（表格）、slide（PPT）
  documentType: 'word',
  // 文档配置
  document: {
    // 当前文档类型
    fileType: 'docx',
    // 文档标识符
    key: 'test2.docx',
    // 文档地址，绝对路径
    url: url: 'http://IP/static/test2.docx',,
    // 文档标题
    title: '测试文档二.docx',
    // 权限，每个要打开的文档都可以设置独立的权限
    permissions: {
      // 启用评论
      comment: false,
      // 启用下载
      download: true,
      // 启用编辑
      edit: true,
      // 启用导出
      print: true,
      // 启用预览
      review: true
    }
  },
  editorConfig: {
    // 回调地址
    callbackUrl: 'http://IP/api/v1/onlyoffice/callback',
    // 设置语言
    lang: 'zh-CN',
    // 添加用户信息
    user: {
      group: '技术部', id: 'wytxer', name: '程序员未央'
    },
    // 模板列表
    templates: [],
    // customization 字段相关配置详解：https://api.onlyoffice.com/editors/config/editor/customization
    customization: {
      // 强制保存
      forcesave: true,
      features: {
        // 关闭拼写检查
        spellcheck: false
      }
    }
  }
}

其中的 editorConfig.lang 配置项表示国际化配置，设置为 zh-CN ，表示中文。

其中的 editorConfig.user 配置项表示用户信息，可以是业务上的用户体系信息， group 配置项表示组织，在协同编辑时显示的用户名也是在这里设置的。

而其中的 editorConfig.callbackUrl 配置项表示文档编辑服务的回调配置，就是这个配置实现了文档编辑后的保存。

最后实现效果如下：

如上图，文档编辑器和文档编辑服务都是 Onlyoffice 提供的（除此之外，Onlyoffice 里面还有文档存储服务、文档转换服务、文档生成器服务、文档指令服务等），而文档存储服务则是业务中自定义的。

当用户编辑文档时，浏览器 文档编辑服务 ，编辑结束时 文档编辑服务 合并变更并通过 callbackUrl 通知 文档存储服务 文档编辑结束，并返回修改后文档的链接， 文档存储服务 根据返回的文档链接从 文档编辑服务 下载文档并将其存储。

所以每次编辑完成时， callbackUrl 都会收到 Onlyoffice 文档编辑服务传递过来的文档信息，里面除了新的文档链接外，还包含了用户与文档的交互状态、文档标识符、文档强制保存类型等字段（可在 Onlyoffice callbackUrl 介绍 看到完整的回调参数说明）。 callbackUrl 拿到这些回调参数后根据文档状态进行文档保存操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const { url, status } = body
// 正在编辑文档但保存了当前文档状态
if (status === 6) {
  try {
    // 保存文档最核心的 3 行代码
    // 1、根据文档链接地址下载文档文件
    const file: AxiosResponse = await this.request.axiosRef.get(url, {
      responseType: 'stream'
    })
    // 2、创建可写流
    const stream: WriteStream = createWriteStream(
      // 将文档文件保存到磁盘目录，这里是一个绝对路径，例如 /var/opt/onlyoffice/files/test2.docx
      join(this.config.get('staticPath'), body.key)
    )
    // 3、写入文档文件
    file.data.pipe(stream)
  } catch (error) {
    // 保存出错
  }
} else if (status === 7) {
  // 强制保存文档出错
}

这里最核心的就是 try 函数里面的 3 行代码，合起来实现了 根据文档链接下载文档并保存到服务器 。

当前示例页面访问路径： http://127.0.0.1:3001/onlyoffice/document/custom-config

接口获取 Onlyoffice 配置

上面的实现方式，配置项是写在前端的，而真实的业务中，建议配置项通过后端获取。

1

<onlyoffice-editor :config="editorConfig" />

1
2
3
4
5
6
7
8
9
10
11
12
13

// Onlyoffice 编辑器配置项
const editorConfig = {
  width: 1200,
  height: 800,
  documentType: 'word'
  // ...
}
// 最终接口返回的字段信息
return {
  id: 1,
  remarks: '业务字段',
  editorConfig
}

当前示例页面访问路径： http://127.0.0.1:3001/onlyoffice/document/editor

使用 JWT 加密 Onlyoffice 配置

Onlyoffice 服务支持配置 JWT 加密提升服务安全性。那么，如何开启 Onlyoffice 的 JWT 加密呢？

1
2

# 注意把 id 替换成自己的
docker cp id:/etc/onlyoffice/documentserver/local.json ./

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

{
  "services": {
    "CoAuthoring": {
      "sql": {
        "type": "postgres",
        "dbHost": "localhost",
        "dbPort": "5432",
        "dbName": "onlyoffice",
        "dbUser": "onlyoffice",
        "dbPass": "onlyoffice"
      },
      "token": {
        "enable": {
          "request": {
            "inbox": true,
            "outbox": true
          },
          "browser": true
        },
        "inbox": {
          "header": "AuthorizationJwt",
          "inBody": true
        },
        "outbox": {
          "header": "AuthorizationJwt",
          "inBody": true
        }
      },
      "secret": {
        "inbox": {
          "string": "123456"
        },
        "outbox": {
          "string": "123456"
        },
        "session": {
          "string": "123456"
        }
      }
    }
  },
  "rabbitmq": {
    "url": "amqp://guest:guest@localhost"
  }
}

1
2

# 注意把 id 替换成自己的。这一步会覆盖 Onlyoffice 服务里面的默认配置，建议先做好备份方便恢复
docker cp local.json id:/etc/onlyoffice/documentserver/ && docker exec -it id /bin/bash -c "supervisorctl restart all"

1
2
3
4
5
6
7
8

// 如果是使用了 JWT 加密，重新组装请求参数
if (useJwtEncrypt === 'y') {
  newBody = {
    token: this.jwt.sign(newBody, {
      secret: this.config.get('onlyoffice.secret')
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

onlyofficeConversion({
  // 请求参数详解：https://api.onlyoffice.com/editors/conversionapi
  async: false,
  // 当前要转换的文档类型
  filetype: 'html',
  // 最终要输出的文档类型
  outputtype: 'docx',
  // 文档地址
  url: 'http://IP/static/test5.html',
  // 文档名称
  key: 'test5.html'
})
  .then(res => {
    // res.endConvert 返回 true，表示文档转换成功
    if (res.endConvert) this.$message.success('转换成功')
  })
  .finally(() => {
    this.loading.toDocx = false
  })

1
2
3
4
5
6

{
  "fileUrl": "http://127.0.0.1:3001/cache/files/conv_test5.html_docx/output.docx/output.docx?md5=3sOj9_vDJTc5HVTVQFU7bw&expires=1661184550&filename=output.docx",
  "fileType": "docx",
  "percent": 100,
  "endConvert": true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 要生成的文档类型
builder.CreateFile("docx")
// 文档对象
var oDocument = Api.GetDocument()

// 在文档对象上创建一个元素
var oParagraph = oDocument.GetElement(0)
// 设置元素的文本内容为「标题」
oParagraph.AddText("标题")
// 设置元素文本的对齐方式
oParagraph.SetJc("center")
// 设置元素字体大小
oParagraph.SetFontSize(40)
// 设置元素字体
oParagraph.SetFontFamily("Arial")

1
2
3
4
5
6

onlyofficeBuilder({
  // 请求参数详解：https://api.onlyoffice.com/editors/documentbuilderapi
  async: false,
  // 当前语法文件路径
  url: 'http://IP/static/docbuilder/test1.docbuilder'
})

1
2
3
4
5
6
7

{
  "key": "bld_e6f134f281a3cb8b",
  "urls": {
    "test1.docx": "http://127.0.0.1:3001/cache/files/bld_e6f134f281a3cb8b/output/test1.docx/test1.docx?md5=f-wyC4a-Hs0wjHR3FXhscQ&expires=1661185765&filename=test1.docx"
  },
  "end": true
}

1
2
3
4
5
6

editorConfig.document = {
  fileType: 'xlsx',
  key: 'test1.xlsx',
  url: 'http://IP//static/test1.xlsx',
  title: '测试表格.xlsx'
}

1

editorConfig.documentType = 'cell'

1

pnpm add onlyoffice-vue