Vue如何實現預覽文件功能

這篇文章主要講解了“Vue如何實現預覽文件功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue如何實現預覽文件功能”吧！

安裝 

//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對象轉為一個路徑。2、通過FileReader類來進行加載獲取base64編碼等。3、通過調用Blob對象的arrayBuffer方法獲取到文件的buffer進行賦值。

下面直接上完整代碼了，大家稍微一看都懂啦。我這里測試的還是從本地選擇的文件，從服務器獲取文件也是一樣的，設置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"  :src="src" /> -->
      <!-- <VueOfficeExcel v-if="src"  :src="src" /> -->
      <VueOfficePdf v-if="src"  :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文件流轉為一個路徑）
        this.src = window.URL.createObjectURL(new Blob([fileBlob]))
 
        // 第二種方式（轉為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如何實現預覽文件功能”的內容了，經過本文的學習后，相信大家對Vue如何實現預覽文件功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！