vue2实现excel文件预览

一、插件

通过xlsx插件解析excel数据，对解析后的html组件进行渲染展示。

npm install xlsx

二、完整代码 

<template><!-- excel文件预览 --><divelement-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"class="panel-box pd-15"><div class="file-pre"><el-tabs v-model="activeName" type="border-card" style="overflow:auto"><el-tab-pane v-for="(item,index) in excelSheet" :key="index" :label="item.name" :name="item.name" style="overflow:auto"><div class="table" v-html="item.innerHTML"></div></el-tab-pane></el-tabs></div><div class="tc mgt-20"><button class="btn-submit" @click="close()">关闭</button></div></div>
</template><script>
import { read, utils } from "xlsx";export default {name:'excelFilePreview',data() {return {activeName:'',excelSheet:[],};},created() {const params = this.$commonUtil.decodeQuery(this.$route.query.info);this.previewFile(params);},methods: {previewFile(docId){this.excelSheet = [];const inParam = {DOC_ID: docId,STAFF_NAME: this.$store.getters.staffName,SYS_USER_CODE: this.$store.getters.systemUserCode};const loading = this.$commonUtil.loading.open();this.$downloadBuffer(this.mciApi.common.file.previewFile, {...inParam}).then(r => {loading.close();const data = new Uint8Array(r);const workbook = read(data, {type: 'array'});// 删除掉没有数据的sheetObject.values(workbook.Sheets).forEach((sheet, index) => {if (Object.keys(sheet).indexOf('!ref') === -1) {delete workbook.Sheets[workbook.SheetNames[index]];}});this.tableToHtml(workbook);}).catch((e) => {loading.close()})},tableToHtml(workbook) {const sheetList = workbook.SheetNames.filter((v) => v.indexOf('数据源') === -1);this.activeName = sheetList[0];sheetList.forEach((sheet) => {const worksheet = workbook.Sheets[sheet];if (worksheet) {const innerHTML = utils.sheet_to_html(worksheet);this.excelSheet.push({name: sheet,innerHTML: innerHTML});} else {this.excelSheet.push({name: sheet,innerHTML: '暂无数据',});}});},close(){this.$commonUtil.closeCurrentTagBackLast(this.$route,false);},}
};
</script><style lang="scss" scope>
.file-pre {padding: 20px;.table-html-wrap /deep/ table {border-right: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;border-collapse: collapse;margin: auto;}.table-html-wrap /deep/ table td {border-left: 1px solid #e8eaec;border-top: 1px solid #e8eaec;white-space: wrap;text-align: left;min-width: 100px;padding: 4px;}table {border-top: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;width: 100%;overflow: auto;tr {height: 44px;}tr:first-child{background: #f2f8ff;}td {min-width: 200px;max-width: 400px;padding: 4px 8px;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}}
}
</style> 

注意：

$downloadBuffer：封装的post请求，请求中的 responseType 需要设置为  arraybuffer

三、预览效果