Integrating OnlyOffice for PPT Preview and Collaborative Editing in a Vue Project

The article outlines the requirement to add a PPT import feature to a Vue project, allowing preview, online editing, multi‑user collaboration, and saving within an internal network.

Several solutions are evaluated, including using an iframe , the vue-ppt-preview plugin, kkfileview , Microsoft Office Online, and finally OnlyOffice, which meets the needs for preview, editing, and collaboration while supporting internal deployment.

OnlyOffice requires backend deployment, but a simple setup is possible; a link to the developer edition is provided.

Front‑end steps:

1. Install the OnlyOffice package:

npm install onlyoffice-document

2. Create a Vue component ( VabOnlyOffice ) that initializes the OnlyOffice document editor with configuration options such as file type, permissions, URLs, language, and user information.

<template>
  <div id='vabOnlyOffice'></div>
</template>

<script>
export default {
  name: 'VabOnlyOffice',
  props: { option: { type: Object, default: () => ({}) } },
  data() { return { doctype: '', docEditor: null } },
  beforeDestroy() { if (this.docEditor) { this.docEditor.destroyEditor(); this.docEditor = null; } },
  watch: { option: { handler(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) { 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, print: option.isPrint, download: false },
          url: option.url,
        },
        documentType: this.doctype,
        editorConfig: {
          callbackUrl: option.editUrl,
          lang: option.lang,
          customization: { autosave: false, chat: false, comments: false, help: 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 || ''
      };
      this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config);
    },
    getFileType(fileType) {
      const doc = ['doc','docm','docx','dot','dotm','dotx','epub','fodt','htm','html','mht','odt','ott','pdf','rtf','txt','djvu','xps'];
      const csv = ['csv','fods','ods','ots','xls','xlsm','xlsx','xlt','xltm','xltx'];
      const ppt = ['fodp','odp','otp','pot','potm','potx','pps','ppsm','ppsx','ppt','pptm','pptx'];
      if (doc.includes(fileType)) return 'text';
      if (csv.includes(fileType)) return 'spreadsheet';
      if (ppt.includes(fileType)) return 'presentation';
      return '';
    }
  }
}
</script>

3. In the page where OnlyOffice is needed, import and register the component, define the configuration object, and provide buttons to open and close the editor.

<template>
  <div id="app">
    <div class='qualityManual-container'>
      <button @click='getFile'>测试预览onlyOffice文档</button>
      <button @click='close'>关闭</button>
      <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 { option: { url: '', isEdit: '', fileType: '', title: '', lang: '', isPrint: '', user: { id: null, name: '' } }, show: false }; },
  methods: {
    getFile() {
      this.show = true;
      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;height:100%;}
.qualityManual-container{height:100%;}
.qualityManual-container-office{width:100%;height:calc(100% - 55px);}
</style>

After integrating the component, clicking the test button opens the OnlyOffice editor where the PPT can be previewed, played as a slideshow, and edited; clicking close hides the editor.

The article concludes that the functionality is complete and ready for use.