博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js-xlsx导出自定义合并列头实现思路
阅读量:6246 次
发布时间:2019-06-22

本文共 2086 字,大约阅读时间需要 6 分钟。

img_c7b30e9ace538d38eeec33b7a2a660df.png

前两天有几个小伙伴找我问我关于js-xlsx导出时列头合并单元格的问题,因为小伙伴需要导出的效果都不太一样,所以我在这里对其解决思路简单的给讲一下,大家根据实际情况自行修改。

1.通过导入获取列头JSON数据

其实合并单元格我早在文章《》中有讲到过可能当时将的比较简单所以这次我们讲下比较复杂的情况.。

首先我先创建一个xlsx文件里面只存放我的列头数据比如:

img_f110681e51e0e7d931a389010d43768d.png

导入示例代码:

    

可以看到导出结果:

img_9d8b4ce385eb57a4d7e550f82755e9f4.png

整理后我们得到关键数据:

{ "A1": { "v": "日期" }, "B1": { "v": "配送信息" }, "C1": { "v": "" }, "D1": { "v": "" }, "E1": { "v": "" }, "F1": { "v": "" }, "A2": { "v": "" }, "B2": { "v": "姓名" }, "C2": { "v": "地址" }, "D2": { "v": "" }, "E2": { "v": "" }, "F2": { "v": "" }, "A3": { "v": "" }, "B3": { "v": "" }, "C3": { "v": "省份" }, "D3": { "v": "市区" }, "E3": { "v": "地址" }, "F3": { "v": "邮编" }, "!merges": [{ "s": { "c": 1, "r": 0 }, "e": { "c": 5, "r": 0 } }, { "s": { "c": 2, "r": 1 }, "e": { "c": 5, "r": 1 } }, { "s": { "c": 0, "r": 0 }, "e": { "c": 0, "r": 2 } }, { "s": { "c": 1, "r": 1 }, "e": { "c": 1, "r": 2 } }] }

2.尝试导出列头

代码中的相关示例可查看文章《》

代码示例:

    

成功导出的效果:

img_8c3ef54ce0adff9b442e02065dae11d8.png

3.导出数据与自定义列头

一般情况下我们导出的JSON数据是这样的:

[{    "riqi": "2016/5/1",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/2",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/3",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/4",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/5",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/6",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}, {    "riqi": "2016/5/7",    "ming": "关爱单身狗",    "sheng": "上海",    "shi": "普陀区",    "dizhi": "上海市普陀区金沙江路 1518 弄",    "youbian": "200333"}]

那好,只要将数据和列头的json数据进行整合导出就行了,不过注意一点就是因为列头数据跟导出数据列可能无法根据英文字段对应,所以我们需要手动声明顺序数组去匹配对应:

    

最终导出效果:

img_4333b63edcf9edbbf6461663958cf675.gif

大概思路就是这样的,如果大家有跟好的办法可以在文章下面评论区留言或交流。

转载地址:http://gxlia.baihongyu.com/

你可能感兴趣的文章
验证表单必须为数字并且只保留小数点后2位
查看>>
2-sat基础题 uvalive 3211
查看>>
Elasticsearch5.2.0部署过程的坑
查看>>
go build 不同系统下的可执行文件
查看>>
浏览器版本信息判断整理
查看>>
【我的Android进阶之旅】解决Android Studio 运行gradle命令时报错: 错误: 编码GBK的不可映射字符...
查看>>
windows 下解决 Time_Wait 和 CLOSE_WAIT 方法
查看>>
SOUI Editor使用教程
查看>>
PHP字符串的替换(preg_replace)
查看>>
责任链模式的具体应用
查看>>
Nginx安装
查看>>
Aix下查看内存命令
查看>>
[Android]JsonObject解析
查看>>
最好用的软件快速开发平台-全部源码-3800/套
查看>>
移动端fixed后 横竖屏切换时上部或下部出现空隙问题
查看>>
Django ORM 操作 必知必会13条 单表查询
查看>>
selenium 安装与 chromedriver安装
查看>>
ethereumjs/ethereumjs-vm-1-简介
查看>>
go标准库的学习-fmt
查看>>
iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接)
查看>>