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

文档地址：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 = truenew 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 = truenew 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>