vue中使用el-upload上传excel生成table数据
最近公司有个需要上传excel的需求,可以让上传的excel转换为table数据,方便用户查看,由于之前没做过此类的需求,所以我百度了一波,了解到xlsx这个插件可以转换进行导入导出excel,既然如此,那就决定用你了.以下是功能展示
好了 接下里说如何实现此功能
首先我们先下载xlsx这个包
npm i xlsx
然后在你想要实现的地方导入
import xlsx from "xlsx";
我在这里展示以下我的结构
<div class="excel">
<el-upload
class="upload-demo"
action=""
accept=".xls, .xlsx"
:auto-upload="false"
:show-file-list="false"
:on-change="handleChange"
>
<el-button
size="small"
type="primary"
>点击上传excel</el-button>
</el-upload>
<div class="table">
<el-table
v-if="tableData.length > 0"
:data="tableData"
>
<el-table-column
v-for="item in tableHeader"
:key="item"
:prop="item"
:label="item"
></el-table-column>
</el-table>
</div>
我是在el-upload的on-change事件中读取上传的文件的
async handleChange(file, fileList) {
var data = file.raw;
const excel = await this.readFile(data);
// 使用xlsx读取二进制数据 生成excel的全部信息
var workbook = xlsx.read(excel, { type: "binary" });
// 通过xlsx转换为可读的表格数据
//workbook.Sheets[workbook.SheetNames[0]] 获取当前上传的表格的信息,例如总共有几行几列啥的
data = xlsx.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
const header = this.getHeaderRow(workbook.Sheets[workbook.SheetNames[0]]);
this.tableData = data;
this.tableHeader = header;
},
readFile方法如下
// 读取上传的文件
readFile(file) {
return new Promise((resolve, reject) => {
var reader = new FileReader();
// 把文件转为二进制
reader.readAsBinaryString(file);
reader.onload = e => {
// console.log(e.target.result);
resolve(e.target.result);
};
});
},
此时我们已经获取到了转换好的数组对象数据,如下
但是el-table是需要表头信息的 可以仔细查看我的on-change事件里面是有一个getHeaderRow方法来获取表头信息的
// 获取表头信息
getHeaderRow(sheet) {
const headers = [];
//获取总共的行数和列数
const range = xlsx.utils.decode_range(sheet["!ref"]);
let C;
const R = range.s.r; // 开始行
//遍历每列
for (C = range.s.c; C <= range.e.c; ++C) {
// 找到每列的第一行数据即使表头
const cell = sheet[xlsx.utils.encode_cell({ c: C, r: R })];
let hdr = "UNKNOWN " + C;
if (cell && cell.t) hdr = xlsx.utils.format_cell(cell);
headers.push(hdr);
}
return headers;
}
至此 ,excel已经成功生成到页面tablel了,因为我是写的demo所以有些判断就没写的那么详细,比如可能需要判断是否是以xxx后缀才能上传,上传表格的大小不能超过多少,当然,你也可以把这些代码封装成一个组件…
好了以上就是我分享的如何在vue中上传excel文件,如果你觉得有帮助的话,可以为我点一个赞哦,搬运请写明出处,万分感谢!!!