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

时间:2021-6-12 作者:qvyue

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

bullet 导出

    equiv 安装依赖

        cnpm i xlsx –save

    equiv 实现

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

        cdot 组件可接收的参数如下

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

                默认值如下

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

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

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

            cdot 当点击导出按钮,触发回调

                引入xlsx

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

                导出逻辑

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

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

                    approx isVoid函数

react--使用js-xlsx实现excel文件的导入导出及预览
(校验合法)

                     approx getTable函数

react--使用js-xlsx实现excel文件的导入导出及预览
(使用js原生api从页面中查找table元素配合xlsx的table_to_sheet 函数获取excel的表头信息,本项目中所有的表格都是使用的antd的table组件)

                    approx getSheetHead函数

react--使用js-xlsx实现excel文件的导入导出及预览
(table_to_sheet  函数对table元素的转化结果是包含操作列的,显然这个是需要过滤掉的;该函数最终返回的是表格的头部中文字段,如下图所示)

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

                    approx format函数

react--使用js-xlsx实现excel文件的导入导出及预览
(该函数将传入的data数据和表头进行格式化,处理成xlsx的json_to_sheet 想要的数据,处理结果如下)
react--使用js-xlsx实现excel文件的导入导出及预览

                    approx getCharCol函数

react--使用js-xlsx实现excel文件的导入导出及预览
(根据传入的操作列的位置索引转为对应的字符,如0对应的是A;这是因为XLSX.utils.table_to_sheet 函数转化的结果是A1-Z1的形式)

            cdot 导出结果如下

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

    equiv 改进

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

        cdot 安装依赖

            cnpm i xlsx-style –save

            npm install file-saver –save

        cdot xlsx-style导入报错

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

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

react--使用js-xlsx实现excel文件的导入导出及预览
(拦截目标路径,切换为指定文件)

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

                增加辅助函数calculateWidth

react--使用js-xlsx实现excel文件的导入导出及预览
(该函数用来给每一列设置宽度,默认导出的宽度太少)

                增加辅助函数addHeadlineStyle

react--使用js-xlsx实现excel文件的导入导出及预览
(设置文字,背景颜色)

                导出方式使用filesave

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

                效果如下

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

bullet 导入

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

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

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

        对应函数renderBody如下

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

        对应函数renderButton如下

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

        对应函数onPageChange如下

react--使用js-xlsx实现excel文件的导入导出及预览
(由于将20000条数据一次性给table表格需要花费一分半的时间,故在本地做分页处理)

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

react--使用js-xlsx实现excel文件的导入导出及预览
(通过向body动态添加input标签实现文件选择;通过

FileReader 实例读取excel文件;利用

sheet_to_json 将读取到的结果转化为json对象;最后别忘了remove掉添加的input标签)

        新增的辅助函数如下

react--使用js-xlsx实现excel文件的导入导出及预览
(用于计算table表格的columns接收值)

        新增组件状态如下

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

        导入预览效果如下

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

文档

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

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

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


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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。