js如何读取excel文件，绘制echarts图形。

一、场景描述

• 一般来讲，前端要拿到excel数据，都是先上传存储数据库，而后再请求后端接口，获取数据。
• 但有100个产品经理，就会有101个不一样的需求。
• 本文以本身的vue项目为例。

二、需求描述

• 现有一张excel财务报表，须要根据这张excel表绘制成各类echarts图形，用于年度汇报。
• 不通过后端，前端独立完成。

三、功能实现

• 首先，为了将excel数据绘制成echarts图表，前端得拿到excel数据。

1. 这里咱们借助js-xlsx.js库，安装xlsx:

cnpm i -S xlsx

你也能够cdn的方式直接引用：
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
复制代码

2. 首先你须要读取excel文件：

<input type="file" id="excel-file">
复制代码

3. 添加响应事件change获取excel数据：

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

经过updateFile接受数据
updateFile(e) {
  let files = e.target.files;
  console.log(files)
}
复制代码

4. 获得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]); // 将文件读取为二进制字符串展现在页面
}
复制代码

5. 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: ' '
        })
    }
}
复制代码

6. 将获得的数据渲染在echarts中，效果以下：

   

四、尾言

• 本文中主要讲解excel数据获取部分。
• 对于将获取的数组数据如何处理将会在后面的文章中详细讲解。
• echarts图标在此不作详细讲解，后面将会专门写一篇echarts图标的经常使用配置。如效果图中提示部分的换行以及多颜色样式配置等。