支持多種文件(docx、excel、pdf)預(yù)覽的vue組件庫，支持vue2/3。也支持非Vue框架的預(yù)覽。

github: 《倉庫地址》

演  示： 《演示效果》

功能特色

• 一站式：提供docx、pdf、excel多種文檔的在線預(yù)覽方案，有它就夠了
• 簡單：只需提供文檔的src(網(wǎng)絡(luò)地址)即可完成文檔預(yù)覽
• 體驗好：選擇每個文檔的最佳預(yù)覽方案，保證用戶體驗和性能都達到最佳狀態(tài)

安裝

#docx文檔預(yù)覽組件
npm install @vue-office/docx vue-demi

#excel文檔預(yù)覽組件
npm install @vue-office/excel vue-demi

#pdf文檔預(yù)覽組件
npm install @vue-office/pdf vue-demi

如果是vue2.6版本或以下還需要額外安裝 @vue/composition-api

npm install @vue/composition-api/

使用示例

文檔預(yù)覽場景大致可以分為兩種：

• 有文檔網(wǎng)絡(luò)地址，比如 https://***.docx
• 文件上傳時預(yù)覽，此時可以獲取文件的ArrayBuffer或Blob

.docx文件預(yù)覽

使用網(wǎng)絡(luò)地址預(yù)覽

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

//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關(guān)樣式
import '@vue-office/docx/lib/index.css'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //設(shè)置文檔網(wǎng)絡(luò)地址，可以是相對地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}

上傳文件預(yù)覽

讀取文件的ArrayBuffer

<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
      }
    }
  }
}

excel文件預(yù)覽和pdf文件預(yù)覽通過文件ArrayBuffer預(yù)覽和上面docx的使用方式一致。