这篇文章主要讲解了“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>