本文介绍如何在Vue项目中利用js-xlsx库在前端直接读取Excel文件，无需经过后端接口。通过FileReader解析二进制数据，将Excel内容转换为JSON数组，并直接渲染至ECharts图表中，实现年度汇报数据的快速可视化展示。
1、场景描述
- 常规情况下，前端获取Excel数据需先上传至服务器存储于数据库，随后请求后端接口获取数据。
- 但有100个产品经理，就会有101个不同的需求。
- 本文基于Vue项目实例进行说明。
2、需求描述
- 现有财务报表Excel，需据此绘制各类ECharts图形，用于年度汇报。
- 要求不经过后端，由前端独立完成全流程。
3、功能实现
首先，为实现Excel数据到ECharts图表的转换，前端必须获取Excel原始数据。
此处借助js-xlsx.js库，安装命令如下：
cnpm i -S xlsx也可通过CDN方式直接引用：
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>首先需读取Excel文件：
<input type="file" id="excel-file">添加响应事件change以获取Excel数据：
<input type="file" id="excel-file" @change="updateFile">通过updateFile方法接收数据。
updateFile(e) {
let files = e.target.files;
console.log(files)
}获取到files后，说明已成功获取上传的Excel文件。接下来需将files转换为熟悉的数组类型，此处使用fileReader方法。
FileReader共有4种读取方法：
- 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
- 2.readAsBinaryString(file)：将文件读取为二进制字符串。
- 3.readAsDataURL(file)：将文件读取为Data URL。
- 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'。
updateFile(e) {
let _this = this;
let files = e.target.files;
let fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
let data = ev.target.result;
let workbook = XLSX.read(data, { type: "binary" }); // 以二进制流方式读取得到整份excel表格对象
let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 这里我们只读取第一张表，获取表名（如Sheet1）
_this.excelData = XLSX.utils.sheet_to_json(sheetName, {
header: "A",
raw: true,
defval: " " // 意思是从头开始匹配，如遇到空格，将跳过执行，并替换为" "字符串。
});
console.log(_this.excelData) // excelData在data()中声明的变量, _this.excelData就是我们熟悉的数组数据了。
} catch (e) {
return _this.$message.error("文件类型不正确！");
}
};
// fileReader.readAsBinaryString(files[0]); // 将文件读取为二进制字符串展示在页面
}Excel多张表格的处理：
var fromTo = '' // 表格范围，可用于判断表头数量是否正确
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'] // 表头数量
_this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]), {
header: 'A',
raw: true,
defval: ' '
})
}
}将得到的数据渲染在echarts中，效果如下：
4、尾言
- 本文主要讲解Excel数据获取部分。
- 关于如何对获取的数组数据进行后续处理，将在后续文章中详细讲解。
到此这篇关于如何利用JavaScript读取excel文件并绘制echarts图形的文章就介绍到这了,更多相关js读取excel文件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！