vue 实现读取excel内容，并且以table格式展示
查了很多网上的方法，但是都没有用ant design来做的，因为公司用的jeccg Boot框架，没有办法，自己来弄吧~~
先看最后效果
效果图.PNG
下面要上代码了
-首先第一步，需要下载解析excel的插件
// 直接 npm 安装即可,不用引用
npm install xlsx
-第二步，HTML布局
<li>
<div>选择文件：</div>
<a-upload
name="file"
:multiple="false"
:action='clAction'
@change="uploadFilecl"
:file-list="fileListcl"
:before-upload="beforeUploadcl"
>
<a-button>上传产量</a-button>
</a-upload>
</li>
<a-table :columns="columns" :data-source="tableData" style="margin-top:45px" :scroll="{ x: 1000}">
<a slot="name" slot-scope="text">{{ text }}</a>
</a-table>
-js
data() {
return {
clAction:'https://www.mocky.io/v2/5cc8019d300000980a055e76',//后台上传地址
fileListcl:null,//显示列表
columns:[],//table头
tableData:[]//table内容
};
},
methods: {
beforeUploadcl(file){//上传之前回调，判断上传类型
const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!isJpgOrPng) {
this.$message.error('请选择xlsx类型文件');
this.fileListcl = []
}
return isJpgOrPng;
},
uploadFilecl(info){//上传文件
//ant design 框架中此回调会运行三次，上传中、完成、失败都会调用这个函数。
if(info.event){//只判断是完成的时候
this.importfile(info.file)//核心函数
}
let fileList = [...info.fileList];
this.fileListcl = fileList.slice(-1);
if (info.file.status === 'uploading') {
this.loading = true;
return;
}
if (info.file.status === 'done') {
//上传成功，可以做接下来的操作
}
},
//核心函数
importfile (obj) {
const _this = this
const reader = new FileReader()
_this.tableData = []
_this.columns = []
reader.readAsArrayBuffer(obj.originFileObj)//需要传blob类型
reader.onload = function () {
const buffer = reader.result
const bytes = new Uint8Array(buffer)
const length = bytes.byteLength
let binary = ''
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
const XLSX = require('xlsx')//引用
const wb = XLSX.read(binary, {
type: 'binary'
})
const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// console.log(outdata)，此为取到的excel中内容，然后就可以自己改数据，画页面啦~
let tableheader = outdata[0]
for(let val in tableheader){
_this.columns.push({
title: val,
dataIndex: val,
key: val,
})
}
outdata.forEach((v,i)=>{
v={...v,"key":i}
})
_this.tableData = outdata
}
},
}
