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

news2024/10/7 16:20:33

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

开发环境：

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

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

<!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中，编写官方文档中，关于打开文档的相关代码进行测试：

<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的组件依赖以后，是否还能够正常渲染？

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

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

经过实际测试，页面能够正常渲染：
在这里插入图片描述

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

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

<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>