xlsx 解析excel 后渲染到表格里（前端实现解析excel渲染到表格）

崽崽的谷雨

已于 2022-10-25 18:38:00 修改

阅读量3.4k

点赞数 6

分类专栏： js 前端文章标签： 1024程序员节

于 2022-10-24 08:45:24 首次发布

本文链接：https://blog.csdn.net/weixin_44058725/article/details/127484832

版权

js 同时被 2 个专栏收录

53 篇文章 3 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

需求：

解析 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 引入:

<!--引入某个版本，如3.5.0版本-->
<!-- <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.0/dist/pinyin-pro.js"></script> -->
<!--引入最新版本-->
<script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script>
<script>
  var { pinyin } = pinyinPro;
  pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
</script>

所有代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

    </style>
</head>

<body>
    <div id="app">
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column :prop="item.key" :label="item.value" width="180" v-for="item in columns">
                </el-table-column>

            </el-table>

          
        </template>
    </div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script>
<script>



    const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data() {
            return {
                columns: [],
                tableData: []
            }

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

                ];
             this.tableFormater(data);
        },
        methods: {
            tableFormater(data) {
                var { pinyin } = pinyinPro;
                let keys = [];
                let colums = []; //表格 头配置数组
                //这 是生成表格 表头配置
                data[0].map((item, index) => {
                    let keyArr = pinyin(item, { toneType: "none", pattern: "first", type: "array" });
                    let key = keyArr.join("") + index; //加index 是为了 防止 首字母一样的情况
                    keys.push(key);
                    let obj = {};
                    obj.key = key;
                    obj.value = item;
                    colums.push(obj);
                });
                data.splice(0, 1);//删除第一个元素 也就是表头的数组
                let tableData = [];
                data.map((item, index) => {
                    let o = {};
                    let k = "";
                    colums.map((key, index1) => {
                        o[key.key] = item[index1];
                    });
                    tableData.push(o);
                });
                this.tableData = tableData;
                this.columns = colums;
            }
        }
    })

</script>

</html>

效果图：