支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。
《使用非Vue框架(原生js、React等)、或者Vue里面报错,看这里》
- 一站式:提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档的在线预览方案,有它就够了
- 简单:只需提供文档的src(网络地址)即可完成文档预览
- 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态
#docx文档预览组件
npm install @vue-office/docx [email protected]
#excel文档预览组件
npm install @vue-office/excel [email protected]
#pdf文档预览组件
npm install @vue-office/pdf [email protected]
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api
文档预览场景大致可以分为两种:
- 有文档网络地址,比如 https://***.docx
- 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob
使用网络地址预览
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
上传文件预览
读取文件的ArrayBuffer
<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data(){
return {
src: ''
}
},
methods:{
changeHandle(event){
let file = event.target.files[0]
let fileReader = new FileReader()
fileReader.readAsArrayBuffer(file)
fileReader.onload = () => {
this.src = fileReader.result
}
}
}
}
</script>
二进制文件预览
如果后端给的不是CDN地址,而是一些POST接口,该接口返回二进制流,则可以调用接口获取文件的ArrayBuffer数据,传递给src属性。
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: ''
}
},
mounted(){
fetch('你的API文件地址', {
method: 'post'
}).then(res=>{
//读取文件的arrayBuffer
res.arrayBuffer().then(res=>{
this.docx = res
})
})
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。
<template>
<vue-office-excel
:src="excel"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</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: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。
<template>
<vue-office-pdf
:src="pdf"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
components: {
VueOfficePdf
},
data() {
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>
如果该项目帮您节省了开发时间,可以请作者喝杯咖啡,加微信交个朋友,交流前端问题。不能打赏的朋友麻烦帮点个免费的赞
打赏的朋友欢迎添加微信,交流前端开发中遇到的技术、问题和困惑。
【仅添加打赏过的用户,不定期删除屏蔽朋友圈的好友(为什么打赏了才能微信问问题?那别人为什么要先付出时间去解答你的问题?都是成年人了,人与人之间是价值交换,不是单向付出)】 常见问题