ONLYOFFICE 文档 Vue 组件

ONLYOFFICE Docs Vue.js 组件 集成 ONLYOFFICE Docs 到 Vue.js 项目。

先决条件

此过程需要 Node.js（和 npm）。

使用 ONLYOFFICE 文档编辑器创建演示 Vue.js 应用程序

此过程创建一个基本 Vue.js 应用程序 并在其中安装 ONLYOFFICE 文档编辑器。

1. 打开命令行或命令提示符，并使用 创建 Vue 工具，创建一个名为 onlyoffice-vue-demo 的 Vue.js 3.x 项目：

   npm create vue@3
   

2. 进入新创建的目录：

   cd onlyoffice-vue-demo
   

3. 从 npm 安装 ONLYOFFICE Docs Vue.js 组件，并使用 --save 将其保存到 package.json 文件中：

   npm install --save @onlyoffice/document-editor-vue
   

4. 打开 onlyoffice-vue-demo 项目中的 ./src/App.vue 文件，并将其内容替换为以下代码：

   <template>
       <DocumentEditor 
           id="docEditor" 
           documentServerUrl="http://documentserver/"
           :config="config"
           :events_onDocumentReady="onDocumentReady"
       /> 
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   import { DocumentEditor } from "@onlyoffice/document-editor-vue";
   
   export default defineComponent({
       name: 'ExampleComponent',
       components: {
           DocumentEditor
       },
       data() {
           return {
               config: {
                   document: {
                       fileType: "docx",
                       key: "Khirz6zTPdfd7",
                       title: "Example Document Title.docx",
                       url: "https://example.com/url-to-example-document.docx"
                   },
                   documentType: "word",
                   editorConfig: {
                       callbackUrl: "https://example.com/url-to-callback.ashx"
                   }
               }
           }
       },
       methods: {
           onDocumentReady() {
               console.log("Document is loaded");
           }
       },
   });
   </script>
   

   将以下行替换为您自己的数据：

   • "http://documentserver/" - 替换为您的服务器的 URL；
   • "https://example.com/url-to-example-document.docx" - 替换为您的文件的 URL；
   • "https://example.com/url-to-callback.ashx" - 替换为您的回调 URL（这是保存功能正常工作所必需的）。

5. 使用 Vue 开发服务器测试应用程序：

   • 要启动开发服务器，请导航到 onlyoffice-vue-demo 目录并运行：

     npm run dev
     

   • 要停止开发服务器，请选择命令行或命令提示符，然后按 Ctrl+C。

部署演示 Vue.js 应用程序

将应用程序部署到生产环境的最简单方法是安装 serve 并创建静态服务器：

1. 全局安装 serve 包：

   npm install -g serve
   

2. 在 3000 端口上为您的静态站点提供服务：

   serve -s build
   

   可以使用 -l 或 --listen 标志调整另一个端口：

   serve -s build -l 4000
   

3. 要提供项目文件夹，请转到该文件夹并运行 serve 命令：

   cd onlyoffice-vue-demo
   serve
   

现在您可以将应用程序部署到创建的服务器：

1. 导航到 onlyoffice-vue-demo 目录并运行：

   npm run build
   

   dist 目录将使用您的应用程序的产品版本创建。

2. 将 onlyoffice-vue-demo/dist 目录的内容复制到 Web 服务器的根目录（复制到 onlyoffice-vue-demo 文件夹）。

该应用程序将部署在 Web 服务器上（默认情况下http://localhost:3000）。

ONLYOFFICE 文档 Vue 组件 API

安装Storybook

安装 Storybook 以独立开发UI组件：

1. 更改 config/default.json 文件中文档服务器的地址：

   "documentServerUrl": "http://documentserver/";
   

   其中 documentserver 是安装了 ONLYOFFICE 文档 的服务器的名称。

2. 使用以下命令生成Storybook：

   npm run build-storybook
   

3. 启动Storybook:

   npm run storybook
   

开发ONLYOFFICE 文档 Vue组件

1. 从 GitHub 存储库克隆项目：

   git clone https://github.com/ONLYOFFICE/document-editor-vue
   

2. 安装项目依赖：

   npm install
   

3. 测试组件：

   npm run test
   

4. 构建项目：

   npm run build
   

5. 创建包：

   npm pack
   

反馈和支持

如果您对 ONLYOFFICE 文档 Vue有任何问题、疑问或建议，请参阅 问题 部分。