vue在线预览word、excel、PDF

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

<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://github.com/501351981/vue-office.git