react--使用js-xlsx实现excel文件的导入导出及预览
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react--使用js-xlsx实现excel文件的导入导出及预览相关的知识，希望对你有一定的参考价值。
参考技术A 最近公司项目要求对之前后端excel操作做优化，需要放到前端来做。讲道理，我觉得没啥子必要，尤其是当我在官网导入一张5k+的excel时浏览器卡死后更是觉得需求之智障。但是没法子，还是要先自己做出来看看实际效果才行，我直接原地6个点......导出
安装依赖
cnpm i xlsx --save
实现
定义公共组件Excel，该组件需要提供导出按钮，当点击时触发相应逻辑
组件可接收的参数如下
默认值如下
根据传入的type类型决定到底是显示导入、导出、预览按钮还是都显示
当点击导出按钮，触发回调
引入xlsx
导出逻辑
首先要做的就是校验是否用户自己实现了导出函数，以及传入的数据是否为数据且是否为空，由于不止导出要用，故放到untils中作公共函数，其他的辅助函数也从中导出
isVoid函数
getTable函数
getSheetHead函数
format函数
getCharCol函数
导出结果如下
改进
可能你也发现了，导出的结果是没有样式信息的,那么如何增加样式呢？答案是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如下
点击导入按钮，回调处理如下
新增的辅助函数如下
新增组件状态如下
导入预览效果如下
文档
https://www.npmjs.com/package/xlsx-style
https://github.com/eligrey/FileSaver.js
https://www.npmjs.com/package/xlsx?activeTab=readme
如有问题，欢迎评论指正哦~~
最后，还有个很重要的事情，点个赞再走吧，客官~~
以上是关于react--使用js-xlsx实现excel文件的导入导出及预览的主要内容，如果未能解决你的问题，请参考以下文章