filereader读取文件_Gin 教你前端读取 Excel 并渲染

编者语：Gin 超级勤奋。下班之余学习技术和英语。她是前端时空共建者和技术写作小队中第一个开始英文技术写作的小伙伴。

中文版 | https://www.yuque.com/fest/articles/gy0dfw

英文版 | https://www.yuque.com/fest/articles/hbv500

本文旨在解决无需调用后端接口，实现前端读取表格文件，获取文件内容，渲染到界面的需求

• 我的其他文章可以解决扩展需求：
• 读取解析表格后执行自动单元格合并
• 读取解析表格后根据数据对比分析自动设置单元格颜色
• 读取解析表格后执行数据分析(透析)生成可满足用户自定义需求的echarts关系图
• 下载界面表格功能

说明

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

前提

平时我经常使用的是：Ant Design + Angular

Element UI + Vue

Ant Design + Vue

方便起见，今天我们使用Element UI + Vue基于vue-element-admin直接开始

步骤一：准备工作

1. 点击进入vue-element-admin下载^[2]

2. 下载解压

3. 安装依赖、运行

4. 运行成功

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

1. 进入以下路径；

src\views\dashboard\index.vue

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

<div class="dashboard-container">div>template><script>export default {name: 'Dashboard'
}script><style lang="scss" scoped>style>

3. 增加 导入 按钮

<div class="dashboard-container"><div class="button_group"><ahref="javascript:;"class="button_s my_file el-button button_s el-button--primary el-button--small"
      ><input type="file" class="my_input" @change="importExcel" id="upload" />导入a>div>div>template><script>export default {name: 'Dashboard',methods: {/**
     * 导入表格
     */
     importExcel(e) {
    }
  }
}script><style lang="scss" scoped>
// 按钮样式
.button_group {
  .button_s {
    width: 78px;
    margin: 5px 10px 5px 5px;
  }
  .button_m {
    width: 100px;
    margin: 5px 10px 5px 5px;
  }
  .my_file {
    position: relative;
    .my_input {
      position: absolute;
      opacity: 0;
      width: 78px;
      height: 30px;
      top: 0;
      left: 0;
    }
  }
}
// 按钮样式style>

4. 保存刷新；

5.  下载xlsx 、引入；

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