快捷導(dǎo)航

Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)功能的示例代碼

更新時(shí)間：2023年03月20日 09:40:15 作者：會(huì)說(shuō)法語(yǔ)的豬

這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)的功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的小伙伴可以參考一下

之前也有寫(xiě)過(guò)兩篇預(yù)覽pdf的，但好像還沒(méi)寫(xiě)過(guò)預(yù)覽word和excel的，但是這次的預(yù)覽pdf和之前的三個(gè)又不一樣！使用pdfobject預(yù)覽pdf ，Vue使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽，Vue使用pdf-lib為文件流添加水印并預(yù)覽，這是之前寫(xiě)的三篇，大家有興趣也可以去看看，總會(huì)有一個(gè)適合的！

這次剛找到三個(gè)兄弟庫(kù)，分別是預(yù)覽word、Excel、pdf文檔的，用著很好用，但是word這個(gè)好像是有點(diǎn)兒bug但還不確定，因?yàn)橛械哪芗虞d出來(lái)有的加載不出來(lái)，還需要驗(yàn)證。其他兩個(gè)應(yīng)該是沒(méi)什么問(wèn)題的，使用起來(lái)也很簡(jiǎn)單，下面來(lá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

引入組件、注冊(cè)

引入進(jìn)來(lái)是個(gè)組件，注冊(cè)一下就可以直接使用了

// docx文檔引入、注冊(cè)
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
 

export default {
  components: { VueOfficeDocx }
}

 
 
// excel文檔引入、注冊(cè)
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
 

export default {
  components: { VueOfficeDocx }
}

 
// pdf文檔引入、注冊(cè)
import VueOfficePdf from '@vue-office/pdf'
 

export default {
  components: { VueOfficeDocx }
}

其實(shí)都是一樣的，很簡(jiǎn)單！

使用

使用的時(shí)候，我們直接使用上面注冊(cè)的組件，然后給其src復(fù)制就可以了，src就是我們要預(yù)覽的文件的路徑，文件路徑其實(shí)也有很多種方式，我這里提供三種方式，分別是通過(guò)1、window.URL.createObjectURL將文件流Blob對(duì)象轉(zhuǎn)為一個(gè)路徑。2、通過(guò)FileReader類來(lái)進(jìn)行加載獲取base64編碼等。3、通過(guò)調(diào)用Blob對(duì)象的arrayBuffer方法獲取到文件的buffer進(jìn)行賦值。

下面直接上完整代碼了，大家稍微一看都懂啦。我這里測(cè)試的還是從本地選擇的文件，從服務(wù)器獲取文件也是一樣的，設(shè)置responseType為"blob"，返回的也就是文件流Blob對(duì)象，操作其實(shí)是一樣的，我示例中給src賦值的方式給出了三種，到時(shí)候選擇一種用就可以了。下面上完整代碼：

<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:{
    /**
     * application/msword;charset=utf-8
     * application/pdf;charset=utf-8
     * application/vnd.ms-excel
     */
    addInputEventListener() {
      const input = document.querySelector('#input')
      input.addEventListener('input', e => {
        const fileBlob = e.target.files[0]
 
        // 第一種方式（通過(guò)window.URL.createObjectURL將Blob文件流轉(zhuǎn)為一個(gè)路徑）
        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>
<style scoped>
.index {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.select-file {
  width: 100%;
  height: 35px;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 15px;
}
.file-preview {
  width: 100%;
  height: 650px;
  border: 1px dashed #007acc;
}
</style>

以上就是Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)功能的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue預(yù)覽文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: