本文目录一览:
js如何设置excle表格边框的样式...
请尝试 oXL.Selection.Borders.Weight = 2; 来设置边框, 1表示最细边框,2表示细边框,4表示粗线。
对于更粗的,可以尝试通过 oXL.Selection.Borders.LineStyle = 1;来表示,具体线型: 1 实线, -4115 虚线, 4 点划相间线, 5 划线后跟两个点, -4118 点式线, -4119 双线。
以上信息是根据excel自带的vb文档找到的,VB下测试正常, 没有在JS下测试.
js xlsx使用说明(主要讲导出表格与设置表头相关)
通过把页面上已有的表格dom节点传入(也可以动态js生成),直接返回一个workbook对象
把页面上已有的表格dom节点传入(也可以动态js生成),直接返回一个worksheet对象
给worksheet对象追加一个表格dom
通过json数据转成一个worksheet对象
react--使用js-xlsx实现excel文件的导入导出及预览
最近公司项目要求对之前后端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如下
点击导入按钮,回调处理如下
新增的辅助函数如下
新增组件状态如下
导入预览效果如下
文档
如有问题,欢迎评论指正哦~~
最后,还有个很重要的事情,点个赞再走吧,客官~~