vue-office：word（.docx）、excel（.xlsx，.xls）格式文件预览

组件安装

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

注意：如果是vue2.6版本或以下还需要额外安装 @vue/composition-api，不然会报错

npm install @vue/composition-api --save

引用使用

docx

<template><div class="dashboard-container"><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="docx文件预览":visible.sync="dialogVisible"width="60%"><VueOfficeDocx :src="url" style="height: 60vh;" @rendered="rendered"></VueOfficeDocx><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {url: 'eee.docx' //设置文档网络地址，或者相对地址}},methods: {rendered(){console.log("渲染完成")}}
}
</script>

xlsx xls

<VueOfficeExcel :src="url" style="height: 60vh;" :options="options" @rendered="renderedHandler"@error="errorHandler"></VueOfficeExcel>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components: {VueOfficeExcel},data() {return {excel: 'eee.xlsx'//设置文档地址,options: {xls: true //设为true，可预览xls}}},methods: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>