1、安装依赖
#docx文档预览组件
npm install @vue-office/docx vue-demi@0.13.11 -S
#excel文档预览组件
npm install @vue-office/excel vue-demi@0.13.11 -S
#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.13.11 -S
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api -S
2、预览WORD代码
<template>
<div>
<vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" />
</div>
</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>
<style lang="scss" scoped></style>
3、预览EXCEL
<template>
<div>
<vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
</div>
</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>
<style lang="scss" scoped></style>
4、预览PDF文章来源：https://www.toymoban.com/news/detail-701960.html
<template>
<div>
<vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
</div>
</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>
<style lang="scss" scoped></style>
5、项目参考地址文章来源地址https://www.toymoban.com/news/detail-701960.html
https://github.com/501351981/vue-office.git
到了这里，关于vue在线预览word、excel、PDF的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
