vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端） 点击关注公众号，“技术干货”及时达！ 需求vue项目内做一个导入ppt的功能导入的ppt在项目内点击可以预览并且直接在线编辑。可以多人协同编辑编辑后可保存内网寻找实现方案使用iframe：将PPT文件嵌入到一个iframe中进行预览。（pass掉的原因：可以预览，不能编辑，内网使用要考虑的安全性问题太多） vue-ppt-preview：一个用于在Vue项目中预览PPT文件的插件，支持在线预览PPT文件，并提供缩略图和全屏预览功能。（pass掉的原因：不支持协同编辑） kkfileview: 一个强大的在线文件预览和编辑控件，可以支持内网使用，同时也支持多人协同编辑。(pass掉的原因：需要后端部署，但他太忙了，没时间) 微软的 Office Online 插件来实现，可在线预览也支持多人协同编辑，也无需安装，自动保存，这样看是很符合领导的需求了,但是他的文件有暴露风险（公司文件密级特别高，我可不想吃免费饭） onlyOffice: 可以实现在线预览和编辑多种文档格式。支持内网部署，并且可以实现多人协同编辑。他提供了免费的开源版本和付费的企业版，企业版包含更多高级功能和技术支持。免费版多人协同编辑通常只支持2-10人，想要支持更多人协同编辑就要使用付费的企业版。公司不愿意付费，但领导说10人足够了，所以最终决定使用onlyOffice。 功能实现后端部署：onlyOffice也是需要后端部署的，但是听说简单部署一下就好，具体我不清楚，我不会后端 (可以官网看教程：https://www.onlyoffice.com/zh/developer-edition.aspx) 前端步骤：1.安装OnlyOffice npm install onlyoffice-document 新建一个组件放onlyOffice(下面是组件的完整代码，可直接复制去使用)template div id='vabOnlyOffice'/div /template script export default { name: 'VabOnlyOffice', props: { option: { type: Object, default: () = { return {} }, }, }, data() { return { doctype: '', docEditor: null, } }, beforeDestroy() { if (this.docEditor !== null) { this.docEditor.destroyEditor(); this.docEditor = null; } }, watch: { option: { handler: function(n) { this.setEditor(n) this.doctype = this.getFileType(n.fileType) }, deep: true, }, }, mounted() { if (this.option.url) { this.setEditor(this.option) } }, methods: { async setEditor(option) { if (this.docEditor !== null) { this.docEditor.destroyEditor(); this.docEditor = null; } this.doctype = this.getFileType(option.fileType) let config = { document: { //后缀 fileType: option.fileType, key: option.key ||'', title: option.title, permissions: { edit: option.isEdit,//是否可以编辑: 只能查看，传false print: option.isPrint, download: false, // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。默认值与edit或review参数的值一致。 // "review": true //跟踪变化 }, url: option.url, }, documentType: this.doctype, editorConfig: { callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置 lang: option.lang,//语言设置 //定制 customization: { autosave: false,//是否自动保存 chat: false, comments: false, help: false, // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。默认值为false //是否显示插件 plugins: false, }, user:{ id:option.user.id, name:option.user.name }, mode:option.model?option.model:'edit', }, width: '100%', height: '100%', token:option.token||'' } // eslint-disable-next-line no-undef,no-unused-vars this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config) }, getFileType(fileType) { let docType = '' let fileTypesDoc = [ 'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps', ] let fileTypesCsv = [ 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', ] let fileTypesPPt = [ 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx', ] if (fileTypesDoc.includes(fileType)) { docType = 'text' } if (fileTypesCsv.includes(fileType)) { docType = 'spreadsheet' } if (fileTypesPPt.includes(fileType)) { docType = 'presentation' } return docType } }, } /script 在要使用onlyOffice的页面要做的事：「导入并注册刚刚写好的组件」「用标签的形式使用组件」「写一个触发打开onlyOffice的事件」「事件里面放打开文件需要的配置，例如文件路径，支持的格式等...」（文件不用上传到服务器，我是放到本地的，文件路径写本地的就好，避免文件泄露） 下面是使用onlyOffice页面的完整代码（可直接复制，改一下组件名和文件路径this.option.url的值即可使用） template div id="app" div class='qualityManual-container' div /*写一个触发打开onlyOffice的事件*/ button style='width: 120px;' type='primary' @click='getFile'测试预览onlyOffice文档/button button style='width: 120px;' type='primary' @click='close'/button /div div v-if='show' class='qualityManual-container-office' /*用标签的形式使用组件*/ vab-only-office :option='option' / /div /div /div /template script import vabOnlyOffice from './components/组件名' //导入刚刚写好的组件 export default { name: 'App', components: { vabOnlyOffice //注册导入的组件 }, data() { return { //参考vabOnlyOffice组件参数配置 option: { url: '', isEdit: '', fileType: '', title: '', lang: '', isPrint: '', user: { id:null,name:''} }, show: false, } }, methods: { //事件里面放打开文件需要的配置，例如文件路径，支持的格式等... getFile() { this.show = true // getAction('/file/selectById', { id: this.id }).then(res = { this.option.isEdit = false this.option.lang = 'zh-CN' this.option.url = '你的文件路径' this.option.title = '这是个文档标题而已' this.option.fileType = 'pptx' this.option.isPrint = false this.option.user= { id:12,name:'张三'} // }) }, close() { this.show = false }, }, } /script style html,body{ height:100%; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; height:100%; } .qualityManual-container { padding: 0 !important; height:100%; } .qualityManual-container-office { width: 100%; height: calc(100% - 55px); } /style 看效果点击测试预览office文档打开ppt预览 点击关闭就隐藏 加载成功后的ppt，可以预览，播放幻灯片，编辑等... 如果有写的不明白的地方：请看官网实现onlyoffice官网 「功能完成，可以摸鱼咯~~~」 点击关注公众号，“技术干货”及时达！ 阅读原文