Vue如何實(shí)現(xiàn)預(yù)覽文件功能

這篇文章主要講解了“Vue如何實(shí)現(xiàn)預(yù)覽文件功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue如何實(shí)現(xiàn)預(yù)覽文件功能”吧！

安裝 

//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"  :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]
 
        // 第一種方式（通過(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ù)覽文件功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue如何實(shí)現(xiàn)預(yù)覽文件功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！