# vue-onlyoffice-demo

**Repository Path**: LeiZhK/vue-onlyoffice-demo

## Basic Information

- **Project Name**: vue-onlyoffice-demo
- **Description**: Vue OnlyOffice Demo
这是一个基于Vue 2和OnlyOffice开源框架实现的多人在线办公文档编辑demo。本项目展示了如何在Vue应用中集成OnlyOffice编辑器，实现文档的在线编辑和预览功能。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 3
- **Created**: 2022-06-28
- **Last Updated**: 2026-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: OnlyOffice, demo, vue2

## README

# Vue OnlyOffice Demo

这是一个基于Vue 2和OnlyOffice开源框架实现的多人在线办公文档编辑demo。本项目展示了如何在Vue应用中集成OnlyOffice编辑器，实现文档的在线编辑和预览功能。

## 项目功能

- 文档列表展示
- 文档在线编辑
- 支持多种文档类型：
  - 文本文件：doc, docx, txt等
  - 电子表格：xls, xlsx等
  - 演示文稿：ppt, pptx等
- 响应式布局

## 技术栈

- **前端框架**：Vue 2.6.14
- **路由**：Vue Router 3.5.1
- **UI框架**：Muse UI 3.0.2
- **文档编辑器**：OnlyOffice

## 项目结构

```
vue-onlyoffice-demo/
├── public/
│   ├── favicon.ico
│   └── index.html       # 主HTML文件，引入OnlyOffice API
├── src/
│   ├── assets/          # 静态资源
│   │   └── logo.png
│   ├── components/      # 组件
│   │   ├── VabOnlyOffice/  # OnlyOffice编辑器组件
│   │   │   └── index.vue
│   │   └── HelloWorld.vue
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── views/           # 页面视图
│   │   ├── AboutView.vue
│   │   ├── Detail.vue   # 文档编辑页面
│   │   └── HomeView.vue # 文档列表页面
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口
├── .gitignore
├── LICENSE             # MIT许可证
├── README.md           # 项目说明
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
└── vue.config.js
```

## 核心组件

### VabOnlyOffice 组件

这是项目的核心组件，负责集成OnlyOffice编辑器。它支持以下功能：

- 动态配置编辑器参数
- 支持多种文档类型的识别和处理
- 编辑器的生命周期管理
- 用户权限控制

### 页面功能

1. **HomeView**：展示文档列表，点击编辑按钮跳转到文档编辑页面
2. **Detail**：加载并显示OnlyOffice编辑器，用于文档的在线编辑
3. **AboutView**：项目介绍页面

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run serve
```

### 构建生产版本

```bash
npm run build
```

## OnlyOffice 集成说明

本项目通过CDN方式引入OnlyOffice API：

```html
<script type="text/javascript" src="http://119.3.186.45/web-apps/apps/api/documents/api.js"></script>
```

在实际生产环境中，建议部署自己的OnlyOffice服务器或使用官方的云服务。

## 配置说明

### VabOnlyOffice 组件参数

| 参数 | 类型 | 说明 | 默认值 |
|------|------|------|--------|
| url | String | 文档的URL地址 | - |
| fileType | String | 文档类型（如doc, xls, ppt等） | - |
| title | String | 文档标题 | - |
| isEdit | Boolean | 是否允许编辑 | true |
| isPrint | Boolean | 是否允许打印 | true |
| lang | String | 编辑器语言 | zh-CN |
| user | Object | 用户信息（id, name） | - |
| model | String | 编辑器模式 | edit |
| token | String | 认证令牌 | - |
| editUrl | String | 编辑保存回调地址 | - |

## 示例文档

项目中包含以下示例文档：

1. 我的文档1.doc - Word文档
2. 我的文档2.xls - Excel表格
3. 我的文档3.xls - Excel表格
4. 我的文档4.doc - Word文档
5. 我的文档5.txt - 文本文件

## 浏览器兼容性

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 许可证

本项目采用MIT许可证。详见[LICENSE](LICENSE)文件。

## 贡献

欢迎提交Issue和Pull Request！

## 联系方式

如有问题或建议，请通过以下方式联系：

- 项目地址：https://github.com/yourusername/vue-onlyoffice-demo
- 邮箱：your.email@example.com