从0-1超详细教你实现前端读取excel表格并渲染到界面

• 说明
• 前提
• 代码仓库
• 步骤一：准备工作
• 步骤二：实现导入表格解析
• 步骤三：实现表格渲染
• 结语

• 本文旨在解决无需调用后端接口，实现前端读取表格文件，获取文件内容，渲染到界面的需求
• 我的其他文章可以解决扩展需求：
• 读取解析表格后执行自动单元格合并
• 读取解析表格后根据数据对比分析自动设置单元格颜色
• 读取解析表格后执行数据分析（透析）生成可满足用户自定义需求的echarts关系图
• 下载界面表格功能

说明

公司平时做后台管理系统比较多，类似需求更是十分常见，我也写过类似帖子，但是都是只放代码从来不写注释和步骤，嘿嘿，话不多说，此文章为完整的记录：

前提

平时我经常使用的是：
Ant Design + Angular
Element UI + Vue
Ant Design + Vue
方便起见，今天我们使用Element UI + Vue
基于vue-element-admin直接开始

代码仓库

1.码云地址
2.github地址

步骤一：准备工作

1. 点击进入vue-element-admin下载
   
2. 下载解压
3. 安装依赖、运行
   
4. 运行成功
   

步骤二：实现导入表格解析

1. 进入以下路径；

src\views\dashboard\index.vue

2. 删除无用代码，准备开始；

3. 增加 导入 按钮，保存刷新；

5. 下载xlsx 、引入；
   

6. 编写导入表格 功能、保存刷新；

7. 编写如下表格，用来测试功能 ；
   
   

8. 有时候，表格题目是中文，读取后我们想要得到英文属性名，那么 增加如下代码 、再次测试；

我们把表格改成不规则状态、保存、打开界面测试

步骤三：实现表格渲染

1. 界面增加 表格组件 。

data() {
    return {
      dataArr: [], // 表格内容数据数组
      // countArr: {}, // 分析表格数据以及表头，得到一个对照数组，用来进行自定义合并，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
      tableColumn: [], // 表格表头配置数组
      tableLoading: false // 表格是否loading
    };
  },

2. 增加 表格渲染方法 。

备注：表格渲染方法中有一部分代码是用来映射中英文属性名的，这个是我增加的一个功能，有时候也不不需要使用，可以按自己需求来修改代码；

setTable(headers, excellist) {
      const tableTitleData = []; // 存储表格表头数据
      const tableMapTitle = {}; // 设置表格内容中英文对照用
      headers.forEach((_, i) => {
        tableMapTitle[_] = "prop" + i;
        tableTitleData.push({
          prop: "prop" + i,
          label: _,
          width: 100
        });
      });
      console.log("tableTitleData", tableTitleData);
      // 映射表格内容属性名为英文
      const newTableData = [];
      excellist.forEach(_ => {
        const newObj = {};
        Object.keys(_).forEach(key => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      console.log('newTableData',newTableData);
      this.tableColumn = tableTitleData;
      this.dataArr = newTableData;
    },

3. 调用 表格渲染方法 。

		// 在importExcel(e)方法中添加下面代码
          // 渲染表格1-1
          this.setTable(headers, excellist);
          // 渲染表格1-2

4. 功能测试
   

结语

本代码支持不规则数据，没有表头的也可以渲染到界面哦~~
欢迎大家指出我代码的错误~
如果有更好的写法，欢迎大家提出来，共同进步哟~~