vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）

需求

1. vue项目内做一个导入ppt的功能
2. 导入的ppt在项目内点击可以预览并且直接在线编辑。
3. 可以多人协同编辑
4. 编辑后可保存
5. 内网

寻找实现方案

1. 使用 iframe ：将PPT文件嵌入到一个iframe中进行预览。（pass掉的原因：可以预览，不能编辑，内网使用要考虑的安全性问题太多）

2. vue-ppt-preview ：一个用于在Vue项目中预览PPT文件的插件，支持在线预览PPT文件，并提供缩略图和全屏预览功能。（pass掉的原因：不支持协同编辑）

3. kkfileview : 一个强大的在线文件预览和编辑控件，可以支持内网使用，同时也支持多人协同编辑。(pass掉的原因：需要后端部署，但他太忙了，没时间)

4. 微软的 Office Online 插件来实现，可在线预览也支持多人协同编辑，也无需安装，自动保存，这样看是很符合领导的需求了,但是他的文件有暴露风险（公司文件密级特别高，我可不想吃免费饭）

5. onlyOffice : 可以实现在线预览和编辑多种文档格式。支持内网部署，并且可以实现多人协同编辑。他提供了免费的开源版本和付费的企业版，企业版包含更多高级功能和技术支持。免费版多人协同编辑通常只支持2-10人，想要支持更多人协同编辑就要使用付费的企业版。公司不愿意付费，但领导说10人足够了，所以 最终决定使用onlyOffice 。

功能实现

后端部署：

onlyOffice也是需要后端部署的，但是听说简单部署一下就好，具体我不清楚，我不会后端 (可以官网看教程： https://www.onlyoffice.com/zh/developer-edition.aspx )

前端步骤：

1.安装OnlyOffice

npm install onlyoffice-document

2. 新建一个组件放onlyOffice( 下面是组件的完整代码，可直接复制去使用 )

3. 在要使用onlyOffice的页面要做的事：

• 「导入并注册刚刚写好的组件」
• 「用标签的形式使用组件」
• 「写一个触发打开onlyOffice的事件」
• 「事件里面放打开文件需要的配置，例如文件路径，支持的格式等...」

（文件不用上传到服务器，我是放到本地的，文件路径写本地的就好，避免文件泄露）

下面是使用onlyOffice页面的完整代码 （可直接复制，改一下 组件名 和 文件路径this.option.url的值 即可使用）

看效果