安装

//docx文档预览组件
npm install @vue-office/docx vue-demi//excel文档预览组件
npm install @vue-office/excel vue-demi//pdf文档预览组件
npm install @vue-office/pdf vue-demi

使用示例

1. docx文档的预览

<template><vue-office-docx :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {src: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

2. excel文档预览

<template><vue-office-excel :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {src: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

3. pdf文档预览

<template><vue-office-pdf :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {src: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

扩展

如果你想要更丰富的文件在线预览功能，可以参考文件在线预览项目