前端纯JS读取Excel并绘制ECharts图表

应用场景

通常情况下，前端处理Excel数据需要先上传至服务器，存入数据库后再通过接口请求返回数据。然而，在特定的场景下，例如本地财务数据分析、年度汇报或需要快速预览的报表生成时，我们往往希望在不经过后端的流程中，由前端独立完成文件的读取与图形绘制工作。

准备工作

第1步：安装xlsx库

要实现前端解析Excel文件，我们需要借助强大的开源库 js-xlsx（通常简称为xlsx）。推荐使用 npm 或 cnpm 安装在 Vue 项目的依赖中：

cnpm i -S xlsx

或者，你也可以通过 CDN 方式直接在 HTML 中引入：

<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

第2步：添加文件上传控件

在 Vue 模板中添加一个文件输入框，用于选择本地的 Excel 文件，并绑定 change 事件以捕获用户操作：

<input type="file" id="excel-file" @change="updateFile">

核心实现逻辑

第3步：监听文件变化并读取内容

当用户上传文件后，首先需要在 updateFile 方法中获取到 File 对象。由于浏览器安全限制，我们无法直接读取文件内部结构，需要使用 FileReader API 将文件内容读取为特定格式的二进制字符串。

updateFile(e) {
  let _this = this;
  let files = e.target.files;
  // 实例化 FileReader
  let fileReader = new FileReader();

  fileReader.onload = function(ev) {
    try {
      // ev.target.result 包含了文件的二进制数据
      let data = ev.target.result;
      // 使用 XLSX.read 解析二进制流，得到 workbook 对象
      let workbook = XLSX.read(data, { type: "binary" });
      
      // ...后续数据处理...

第4步：解析Sheet数据并转换为JSON

拿到 workbook 对象后，我们可以访问其中的 Sheet 列表。通常默认读取第一个 Sheet。XLSX.utils.sheet_to_json 是将 Sheet 表格数据转为 JavaScript 对象的便捷方法，适合直接对接 ECharts 的数据要求。

// 获取第一个Sheet的名称
let sheetName = workbook.SheetNames[0];
// 获取对应的Sheet对象
let sheetData = workbook.Sheets[sheetName];

// 将Sheet转换为JSON数组
// header: "A" 表示列头使用字母标识，便于处理无序表头
_this.excelData = XLSX.utils.sheet_to_json(sheetData, {
  header: "A",
  raw: true,
  defval: " " // 缺失值填充为空字符串
});

console.log(_this.excelData);
// 此时 _this.excelData 即为标准的 JS 数组，可直接用于 ECharts 配置

第5步：处理多Sheet情况

如果 Excel 文件中包含多个 Sheet，可以通过遍历 workbook.Sheets 来逐个读取并合并数据：

var fromTo = '';
for (var sheet in workbook.Sheets) {
    if (workbook.Sheets.hasOwnProperty(sheet)) {
        // !ref 属性存储了该Sheet的有效数据范围，可用于校验表头数量
        fromTo = workbook.Sheets[sheet]['!ref'];
        // 将当前Sheet数据追加到主数据源中
        _this.excelData = _this.excelData.concat(
            XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { 
                header: 'A', 
                raw: true, 
                defval: ' ' 
            })
        );
    }
}

效果验证

完成上述步骤后，_this.excelData 中的数据已经准备好，可以传入 ECharts 的配置项中进行渲染，实现从 Excel 原始文件到网页动态图形的无缝转换。

总结

本文主要讲解了如何利用 FileReader 和 js-xlsx 库在前端环境解析 Excel 文件并获得结构化数据的方法。获得数据后，开发者只需按照 ECharts 的文档规范配置 Series 和 X/Y Axis，即可完成可视化。更多关于数据清洗和高级图表配置的技巧，可参考相关文档进行深入探索。

以上就是前端纯JS读取Excel并绘制ECharts图形的详细内容，更多关于js读取excel文件和前端可视化的资料请关注本站其它相关文章！