1、安装vue-office
npm install @vue-office/docx vue-demi // 预览docx
npm install @vue-office/excel vue-demi // 预览 excel
npm install @vue-office/pdf vue-demi //预览pdf
如果控制台报错，可能是vue版本<=2.6,需安装依赖 @vue/composition-api
npm install @vue/composition-api
2、使用
（1）预览docx
<template>
<vue-office-docx :src="docx" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
（2）预览excel
<template>
<vue-office-excel :src="excel" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
components:{
VueOfficeExcel
},
data(){
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
（3）预览pdf
<template>
<vue-office-pdf :src="pdf" @rendered="rendered"/>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
components:{
VueOfficePdf
},
data(){
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
3、上传完文件需要预览的数据，需要转为路径使用，常用下面方法转化
<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:{
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>
4、对接口获取数据的方法，设置responseType为"blob"，返回的也就是文件流Blob对象，需要用上述方法转化为地址
//在线查看pdf
readPdfFromRemoteFile(url) {
downloadfile(url,this.info).then((response) => {
let blob = new Blob([response], {
type: "application/pdf;charset-UTF-8",
});
const blobUrl = URL.createObjectURL(blob);
this.pdfUrl = blobUrl
})
},
参考文章：
