Vue + vue-office realizes the preview of various files (docx, excel, pdf)

A vue component library that supports preview of multiple files ( docx, excel, pdf ), supports vue2/3. Previews for non-Vue frameworks are also supported.

github: "Warehouse Address"

Demonstration: "Demo Effects"

Features

• One-stop: Provide online preview solutions for docx, pdf, and excel documents, it is enough
• Simple: Just provide the src (web address) of the document to complete the document preview
• Good experience: choose the best preview solution for each document to ensure the best user experience and performance

Install

#docx文档预览组件
npm install @vue-office/docx vue-demi

#excel文档预览组件
npm install @vue-office/excel vue-demi

#pdf文档预览组件
npm install @vue-office/pdf vue-demi

If it is vue2.6 version or below, you need to install @vue/composition-api additionally

npm install @vue/composition-api/

Example of use

Document preview scenarios can be roughly divided into two types:

• There is a document network address, such as https://***.docx
• Preview when the file is uploaded, you can get the ArrayBuffer or Blob of the file at this time

.docx file preview

Preview with web address

<template>
  <vue-office-docx 
      :src="docx"
      style="height: 100vh;"
      @rendered="rendered"
  />
</template>

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}

upload file preview

Read the ArrayBuffer of the file

<template>
  <div>
    <input type="file" @change="changeHandle"/>
    <vue-office-docx :src="src"/>
  </div>
</template>


import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
  components: {
    VueOfficeDocx
  },
  data(){
    return {
      src: ''
    }
  },
  methods:{
    changeHandle(event){
      let file = event.target.files[0]
      let fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload =  () => {
        this.src = fileReader.result
      }
    }
  }
}

The excel file preview and pdf file preview are previewed through the file ArrayBuffer in the same way as the docx above.