ONLYOFFICE 文档 Vue 组件 |
您所在的位置：网站首页 › vue文档在线编辑 › ONLYOFFICE 文档 Vue 组件 |
|
ONLYOFFICE 文档 Vue 组件
ONLYOFFICE Docs Vue.js 组件 集成 ONLYOFFICE Docs 到 Vue.js 项目。 先决条件此过程需要 Node.js（和 npm）。 使用 ONLYOFFICE 文档编辑器创建演示 Vue.js 应用程序此过程创建一个基本 Vue.js 应用程序 并在其中安装 ONLYOFFICE 文档编辑器。 打开命令行或命令提示符，并使用 创建 Vue 工具，创建一个名为 onlyoffice-vue-demo 的 Vue.js 3.x 项目： npm create vue@3进入新创建的目录： cd onlyoffice-vue-demo从 npm 安装 ONLYOFFICE Docs Vue.js 组件，并使用 --save 将其保存到 package.json 文件中： npm install --save @onlyoffice/document-editor-vue打开 onlyoffice-vue-demo 项目中的 ./src/App.vue 文件，并将其内容替换为以下代码： 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"); }, onLoadComponentError (errorCode, errorDescription) { switch(errorCode) { case -1: // Unknown error loading component console.log(errorDescription); break; case -2: // Error load DocsAPI from http://documentserver/ console.log(errorDescription); break; case -3: // DocsAPI is not defined console.log(errorDescription); break; } } }, });将以下行替换为您自己的数据： "http://documentserver/" - 替换为您的服务器的 URL； "https://example.com/url-to-example-document.docx" - 替换为您的文件的 URL； "https://example.com/url-to-callback.ashx" - 替换为您的回调 URL（这是保存功能正常工作所必需的）。使用 Vue 开发服务器测试应用程序： 要启动开发服务器，请导航到 onlyoffice-vue-demo 目录并运行： npm run dev 要停止开发服务器，请选择命令行或命令提示符，然后按 Ctrl+C。 部署演示 Vue.js 应用程序将应用程序部署到生产环境的最简单方法是安装 serve 并创建静态服务器： 全局安装 serve 包： npm install -g serve在 3000 端口上为您的静态站点提供服务： serve -s build可以使用 -l 或 --listen 标志调整另一个端口： serve -s build -l 4000要提供项目文件夹，请转到该文件夹并运行 serve 命令： cd onlyoffice-vue-demo serve现在您可以将应用程序部署到创建的服务器： 导航到 onlyoffice-vue-demo 目录并运行： npm run builddist 目录将使用您的应用程序的产品版本创建。 将 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组件： 更改 config/default.json 文件中文档服务器的地址： "documentServerUrl": "http://documentserver/";其中 documentserver 是安装了 ONLYOFFICE 文档 的服务器的名称。 使用以下命令生成Storybook： npm run build-storybook启动Storybook: npm run storybook 开发ONLYOFFICE 文档 Vue组件从 GitHub 存储库克隆项目： git clone https://github.com/ONLYOFFICE/document-editor-vue安装项目依赖： npm install测试组件： npm run test构建项目： npm run build创建包： npm pack 反馈和支持如果您对 ONLYOFFICE 文档 Vue有任何问题、疑问或建议，请参阅 问题 部分。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |