快捷導航

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

更新時間：2023年03月20日 09:40:15 作者：會說法語的豬

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

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

這次剛找到三個兄弟庫，分別是預覽word、Excel、pdf文檔的，用著很好用，但是word這個好像是有點兒bug但還不確定，因為有的能加載出來有的加載不出來，還需要驗證。其他兩個應(yīng)該是沒什么問題的，使用起來也很簡單，下面來介紹一下：

安裝

//docx文檔預覽組件
npm install @vue-office/docx vue-demi
 
//excel文檔預覽組件
npm install @vue-office/excel vue-demi
 
//pdf文檔預覽組件
npm install @vue-office/pdf vue-demi

引入組件、注冊

引入進來是個組件，注冊一下就可以直接使用了

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

export default {
  components: { VueOfficeDocx }
}

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

export default {
  components: { VueOfficeDocx }
}

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

export default {
  components: { VueOfficeDocx }
}

其實都是一樣的，很簡單！

使用

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

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

<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]
 
        // 第一種方式（通過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>
<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實現(xiàn)預覽文件(Word/Excel/PDF)功能的示例代碼的詳細內(nèi)容，更多關(guān)于Vue預覽文件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: