1 安裝vue-office

npm install @vue-office/docx vue-demi    // 預(yù)覽docx
npm install @vue-office/excel vue-demi   // 預(yù)覽 excel
npm install @vue-office/pdf vue-demi      //預(yù)覽pdf

如果控制臺報錯拍霜，可能是vue版本<=2.6,需安裝依賴 @vue/composition-api

npm install @vue/composition-api

2 使用
（1）預(yù)覽docx

<template>
  <vue-office-docx :src="docx" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

(2) 預(yù)覽excel

<template>
  <vue-office-excel :src="excel" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關(guān)樣式
import '@vue-office/excel/lib/index.css'

export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

（3） 預(yù)覽pdf

<template>
  <vue-office-pdf :src="pdf" @rendered="rendered"/>
</template>

<script>
//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'

export default {
  components:{
    VueOfficePdf
  },
  data(){
    return {
      pdf: 'http://static.shanhuxueyuan.com/test.pdf' //設(shè)置文檔地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

4 上傳完文件需要預(yù)覽的數(shù)據(jù)嘉蕾，需要轉(zhuǎn)為路徑使用，常用下面方法轉(zhuǎn)化

<template>
  <div class="index">
    <div class="select-file">
      <input id="input" type="file">
    </div>
    <div class="file-preview">
      <!-- <VueOfficeDocx v-if="src" style="height: 600px;" :src="src" /> -->
      <!-- <VueOfficeExcel v-if="src" style="height: 600px;" :src="src" /> -->
      <VueOfficePdf v-if="src" style="height: 600px;" :src="src" />
    </div>
  </div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
export default {
  data() {
    return {
      src: ''
    }
  },
  components: { VueOfficeDocx, VueOfficeExcel, VueOfficePdf },
  mounted() {
    this.addInputEventListener()
  },
  methods:{
    addInputEventListener() {
      const input = document.querySelector('#input')
      input.addEventListener('input', e => {
        const fileBlob = e.target.files[0]
 
        // 第一種方式（通過window.URL.createObjectURL將Blob文件流轉(zhuǎn)為一個路徑）
        this.src = window.URL.createObjectURL(new Blob([fileBlob]))
 
        // 第二種方式（轉(zhuǎn)為base64編碼）
        const fileReader = new FileReader()
        fileReader.readAsDataURL(fileBlob)
        fileReader.onload = e => {
          this.src = e.target.result
        }
        
        // 第三種方式（獲取到buffer）
        fileBlob.arrayBuffer().then(buffer => {
          this.src = buffer
        })
      })
    }
  }
}
</script>
 

5 對接口獲取數(shù)據(jù)的方法，設(shè)置responseType為"blob"，返回的也就是文件流Blob對象涕滋，需要用上述方法轉(zhuǎn)化為地址

image.png

//在線查看pdf
        readPdfFromRemoteFile(url) {
            downloadfile(url,this.info).then((response) => {
               
                    let blob = new Blob([response], {
                                type: "application/pdf;charset-UTF-8",
                            });
                    const blobUrl = URL.createObjectURL(blob);
                    this.pdfUrl = blobUrl
                })
        },

參考文章：
1：https://www.zhihu.com/question/428037127/answer/2848201769
2：https://blog.csdn.net/m0_51431448/article/details/129657627