ONLYOFFICE 文档 Vue 组件

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

属性

名称	类型	默认	描述
id*	string	null	组件唯一标识符。
documentServerUrl*	string	null	ONLYOFFICE 文档服务器的地址。
config*	object	null	用于使用令牌打开文件的 通用配置 对象。
document_fileType	string	null	文件的类型。
document_title	string	null	文件名。
documentType	string	null	文档类型。
height	string	null	定义浏览器窗口中的文档高度。
type	string	null	定义用于访问文档的平台类型（桌面、移动或嵌入式）。
width	string	null	定义浏览器窗口中的文档宽度。
events_onAppReady	(event: object) => void	null	当应用程序加载到浏览器时调用的函数。 当应用程序加载到浏览器中时调用的函数。
events_onDocumentStateChange	(event: object) => void	null	修改文档时调用的函数。
events_onMetaChange	(event: object) => void	null	通过 meta 命令更改文档的元信息时调用的函数。
events_onDocumentReady	(event: object) => void	null	将文档加载到文档编辑器时调用的函数。
events_onInfo	(event: object) => void	null	应用程序打开文件时调用的函数。
events_onWarning	(event: object) => void	null	发生警告时调用的函数。
events_onError	(event: object) => void	null	发生错误或其他特定事件时调用的函数。
events_onRequestSharingSettings	(event: object) => void	null	当用户尝试通过单击 更改访问权限 按钮来管理文档访问权限时调用的函数。
events_onRequestRename	(event: object) => void	null	当用户尝试通过单击 “重命名...” 按钮重命名文件时调用的函数。
events_onMakeActionLink	(event: object) => void	null	当用户试图获取打开包含书签的文档的链接时调用的函数，滚动到书签位置。
events_onRequestInsertImage	(event: object) => void	null	当用户尝试通过单击 “来自存储的图像” 按钮插入图像时调用的函数。
events_onRequestSaveAs	(event: object) => void	null	当用户尝试通过单击 “另存为...” 按钮来保存文件时调用的函数。
events_onRequestMailMergeRecipients	(event: object) => void	null	当用户尝试通过单击 “邮件合并” 按钮来选择收件人数据时调用的函数。
events_onRequestCompareFile	(event: object) => void	null	当用户尝试通过单击 “存储中的文档” 按钮来选择要比较的文档时调用的函数。
events_onRequestEditRights	(event: object) => void	null	当用户尝试通过单击 “编辑文档” 按钮将文档从查看模式切换到编辑模式时调用的函数。
events_onRequestHistory	(event: object) => void	null	当用户尝试通过单击 “版本历史记录” 按钮来显示文档版本历史记录时调用的函数。
events_onRequestHistoryClose	(event: object) => void	null	当用户试图通过单击 “关闭历史记录” 按钮从查看文档版本历史记录返回到文档时调用的函数。
events_onRequestHistoryData	(event: object) => void	null	当用户试图单击文档版本历史记录中的特定文档版本时调用的函数。
events_onRequestRestore	(event: object) => void	null	当用户尝试通过单击版本历史记录中的 “恢复” 按钮来恢复文件版本时调用的函数。

* - 必填字段

安装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有任何问题、疑问或建议，请参阅 问题 部分。