需求：

解析 excel文档 并且 展示到表格里。

实现步骤：

方法一：纯前端 借用 xlsx 插件 解析后 直接渲染到 表格里。

方法二：前后端结合，前端上传文件，后端解析并返回数据，前端接收到再渲染到表格。

今天只讨论纯前端。

先 安装xlsx插件

cnpm install xlsx

然后调用 它的方法 解析文件（ 使用 Element UI 提供的上传功能组件对 excel 表格数据进行解析）。

代码可参考：

Vue 前端解析 Excel 数据_不情不愿的博客-CSDN博客_vue 解析excel

今天只讨论，解析后的数据渲染成表格的方法：

因为 你解析的excel 表格 表头不确定也就是说列数不确定，甚至 表头的文字也不确定。

思路：

1.拿到解析后的数据，根据 数据生成一个 表头配置信息

  因为表头 列不确定，文字也不确定，所以要 动态生成。格式如下，key是 el-table-column 的prop属性 value是label属性。然后v-for 动态生成el-table-column。

 [{key:"xxx",value:"文字"}]

2.表头 确定好了就该 处理数据了。把数据处理成 表格可以 使用的。

下面是 最基础的表格数据。因为表格列和文字不确定。所以 数组里对象的 key值也是动态的（表头有几个，它就有几个，表头的key就是 它的key）。

 tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

代码如下：

比如解析到的数据如下：

    let data = [["参会人角色", "参会人姓名", "身份证号码", "手机号码", "是否主持人"],["董事长1", "谷雨", "4xxxx", "178xxxx", "是", "信息"],["董事长2", "谷雨2", "4xxxx2", "178xxxx2", "是", "信息2"],];

 第一行是表头信息，从第二行开始才是数据。所以 处理数据时要，删除第一项。

因为表头的 文字不确定 ，所以我借用了 pinyinPro 的库 获取 文字的首字母 为 key值。并且为了防止首字母一样的情况我 还给后面拼上了 它的 下标。

pinyinPro 使用 方法：

https://github.com/zh-lx/pinyin-pro -pinyinPro的GitHub地址

npm 安装

npm install pinyin-pro

浏览器 script 引入:

所有代码如下: 

 总结与补充：

其实 这个 方法 vue,react都能用 方法是通用的。只不过react里 tableFormater 最后两行改成 this.setState就行（就是改成其对应的语法）。

react里 antd 的表头是靠 columns的配置 所以 colums 的配置可以改成 antd 可以接受的。 比如 key改成 dataIndex.value改成title 等等。

我提供的是一个思路，具体运用到不同的 框架 和 ui库需要 做一些变动。