react--使用js-xlsx实现excel文件的导入导出及预览

    最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点......

导出

    安装依赖

        cnpm i xlsx --save

    实现

        定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑

        组件可接收的参数如下

                默认值如下

            根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示

            当点击导出按钮，触发回调

                引入xlsx

                导出逻辑

                首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出

                    isVoid函数

（校验合法）

                     getTable函数

（使用js原生api从页面中查找table元素配合xlsx的table_to_sheet 函数获取excel的表头信息，本项目中所有的表格都是使用的antd的table组件）

                    getSheetHead函数

（table_to_sheet  函数对table元素的转化结果是包含操作列的，显然这个是需要过滤掉的；该函数最终返回的是表格的头部中文字段，如下图所示）

                    format函数

（该函数将传入的data数据和表头进行格式化，处理成xlsx的json_to_sheet 想要的数据，处理结果如下）

                    getCharCol函数

（根据传入的操作列的位置索引转为对应的字符，如0对应的是A；这是因为XLSX.utils.table_to_sheet 函数转化的结果是A1-Z1的形式）

            导出结果如下

    改进

        可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是xlsx-style

        安装依赖

            cnpm i xlsx-style --save

            npm install file-saver --save

        xlsx-style导入报错

            将报错文件copy一份，修改后放到assets目录下

            找到umijs的webpack配置文件，新增如下配置

（拦截目标路径，切换为指定文件）

        增加文字颜色和首行高亮处理

                增加辅助函数calculateWidth

（该函数用来给每一列设置宽度，默认导出的宽度太少）

                增加辅助函数addHeadlineStyle

(设置文字，背景颜色<说实话有点坑，必须像框红的位置这样设置才生效>)

                导出方式使用filesave

                效果如下

导入

        现在，我们来完成导入功能，并且导入后需要使用表格进行分页预览

         新增modal弹窗，用作预览界面

        对应函数renderBody如下

        对应函数renderButton如下

        对应函数onPageChange如下

（由于将20000条数据一次性给table表格需要花费一分半的时间，故在本地做分页处理）

        点击导入按钮，回调处理如下

（通过向body动态添加input标签实现文件选择；通过 FileReader 实例读取excel文件；利用 sheet_to_json 将读取到的结果转化为json对象；最后别忘了remove掉添加的input标签）

        新增的辅助函数如下

（用于计算table表格的columns接收值）

        新增组件状态如下

        导入预览效果如下

---

文档

    https://www.npmjs.com/package/xlsx-style

    https://github.com/eligrey/FileSaver.js

    https://www.npmjs.com/package/xlsx?activeTab=readme

---

如有问题，欢迎评论指正哦~~

最后，还有个很重要的事情，点个赞再走吧，客官~~