JS经典实例网站首页 JS经典实例

layui的excel导出自定义列宽问题

发布时间：2020-03-22 11:01:58编辑：雪饮阅读（）

起因是这样的，之前给客户处理过学员考试信息导出比较慢的问题，后来告诉我说我处理了这个问题后却把之前导出里面的一个学员详情字段弄的不显示了.

我排查下真的是一个坑,其实以前就没有学员详情好吧。。。客户真是会搞事情,以前那个地方的字段叫“考试内容\考试时间”.

现在我这个导出也有这个字段，只是列宽比较小，他自己没有看到而已,那么这样以来今天的主题便有了.

其实在解决这个列宽问题之前，首先我想给大家讲下这个导出excel某个单元格中要是有子表格的问题.

我们这个所谓的考试详情列实际上放的是一行行的考试信息,对于这种情况下，前任直接导出时候只是用逗号分隔，无情的向后追加,这样以来就会导致这个列的宽度越来越大,很不美观.

我这里采用的是\r\n大家都知道我们在bs架构中换行用br，而在cs架构中换行要用\r\n，但是呢这里还有另外一个坑.

excel中某个列若有换行内容时候默认是不会给你换行的，只有你点击该单元格时候才会完全展示你有换行内容时候的样式.

那么有些人会想到设置excel自动换行，其实这个方案或许可以，但如果你仔细观察你会发现若自动换行后因为这一个列的内容较多，导致当前行其他列的单元格高度就大的离谱，这样显然是不可取的，所以这里的自动换行问题我觉得可以不解决的，excel这种默认的方案其实还是挺不错的，有点类似web端的select，select也是在你点击后才展示出来的.

那么我们回到问题的重点：设置列宽

其实关于列宽这里有点小坑,我们都知道layui有导出excel的功能,但是默认是基于table元素的,那么问题来了，如果一个分页的web网页中用table展示，你要导出岂不是只导出当前页,所以我没有采用这种方案，我找到这个layui所依赖的这个excel插件的独立版本.

其实该插件也是依赖自一个国外友人所开发的名叫xlsx.js,然后layui的这个独立版的excel插件是国内一个资深前端基于xlsx.js进行扩展的,其文档中有讲到单元格列宽的设置，但是按照文档怎么都走不通,后来我把他自己的demo按照他的文档走了一遍也是不行,于是发给这位作者，这位作者百忙之中抽出时间看了一下，结果还是作者没走心.

竟然是数据结构问题,之前的导出是用的索引数组,而这次导出用的是关联数组。。。