onlyoffice官方文档中打开文件示例的相关测试

文档地址：https://api.onlyoffice.com/zh/editors/open

开发环境：

后端：zdppy_api开发的一个文档服务
前端：vue3开发的客户端

我们在index.html中，引入了文档服务的js文件：

html 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="http://127.0.0.1:8080/web-apps/apps/api/documents/api.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

紧接着，在src/App.vue中，编写官方文档中，关于打开文档的相关代码进行测试：

html 复制代码

<script setup>
import {message} from "ant-design-vue";

const onLoadDocumentClick = () => {
  message.success("load document")
  // isDocument.value = true
  new DocsAPI.DocEditor("doc", {
    "document": {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "http://192.168.234.138:18889/test.docx"
    },
    "documentType": "word",
  });
}
</script>
<template>
  <div class="bg-indigo-50 p-8 min-h-screen">
    <div class="bg-amber-200 p-8">
      <a-button type="primary" @click="onLoadDocumentClick">Load Document</a-button>
    </div>
    <div class="bg-amber-400 p-8 min-h-96">
      <div id="doc">doc</div>
    </div>
  </div>
</template>

此时，我们发现，页面确实是能够正常渲染的，只不过高度可能有点低：

关于高度低的问题，我们应该是能够通过配置去解决的，这里不是重点。

这里的重点是，如果我们移除了vue的组件依赖以后，是否还能够正常渲染？

js 复制代码

"@onlyoffice/document-editor-vue": "^1.4.0",

从package.json里面移除上面类似的一行，然后删除node_modules，之后重新安装依赖进行测试。为了保证测试的效果，前端界面相关的缓存也直接清空。

经过实际测试，页面能够正常渲染：

所以可以推断出，即使不安装这个组件依赖，我们照样能够通过官方文档中，提供的js相关的代码，进行文档的渲染。

通过配置，可以解决高度问题，以下是最终代码：

html 复制代码

<script setup>
import {message} from "ant-design-vue";

const onLoadDocumentClick = () => {
  message.success("load document")
  // isDocument.value = true
  new DocsAPI.DocEditor("doc", {
    "document": {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "http://192.168.234.138:18889/test.docx"
    },
    "documentType": "word",
    height: '700px',
    width: '100%'
  });
}
</script>
<template>
  <div class="bg-indigo-50 p-8 min-h-screen">
    <div class="bg-amber-200 p-8">
      <a-button type="primary" @click="onLoadDocumentClick">Load Document</a-button>
    </div>
    <div class="bg-amber-400 p-8 min-h-96">
      <div id="doc">doc</div>
    </div>
  </div>
</template>

通过上面的测试，我们可以得出结论，使用vue组件库和不使用，在效果上来说是类似的，几乎没有什么区别？

那么是用组件库好？还是不用好？

分析：

好处就是官方提供了vue组件库，直接使用即可，不需要我们关心底层实现的细节。我们只需要关注config的内容该如何配置即可。
好处还有
- 可能会有更少的代码量
- 可能会有比较好的代码提示。因为如果我们是纯js开发的话，可能代码提示不太友好。
坏处就是对细节做了封装，如果我们想要实现细致的控制，可能难以实现。
坏处还有：
- 需要安装额外的vue组件库
- 需要额外的学习成本，我们除了需要阅读官方文档，可能还需要去阅读组件文档或者源码
- 样式定制可能比较困难

结论：建议不用，因为如果我们想要对onlyoffice做更细致的学习的话，不可能避免的要经常查阅官方文档，而官方文档中提供的都是js代码，不便于测试。另外，我们经过对官方文档的详细学习以后，封装出适合自己的组件，会更有价值。