layui重写table自带的导出功能

以前的项目中前端用的layui，那会选layui就是那会觉得样式还挺好看的，而且基本上需要的组件都有，尤其是自带table的导出和打印功能，不过table的导出功能还有点不足之处，导出后的文件直接查看没什么问题，要编辑或者编辑完成后上传进行预览还是问题挺多的，所以就重写了一下table的导出功能，特来mark一下。

重写这个功能借着了一个layui社区的插件，叫layui.excel,插件基于 xlsx.js 和 FileSaver，做了一个简单的封装，应付日常的的导出还是够用了，这里来记录一下步骤，主要就是在在table.js的源码中修改导出方法的逻辑，然后重新打包编译，替换本地的table.js。

下载layui的源码

具体下载地址就不多说了，可以在layui的官网首页就能看到，切记要下载跟本地版本对应的layui版本（这个很重要）。

重写table.exportFile方法

1.找到layui\src\lay\modules下的table.js文件，先引入layui.excel这个插件

2.找到 table.exportFile这个方法，然后加入自己的excel导出逻辑

原来的导出逻辑是直接用文件流的输出方式生成csv或者xls文件，这里就是简单的判断了一下导出的类型，如果是xls类型就直接生成数据调用excel.exportExcel方法，如果是csv就还是直接调用原来的导出逻辑。

重新打包编译

1. 安装依赖

cd到layui文件夹下，npm install命令安装依赖

2.全局安装gulp：npm install -g gulp

在layui项目目录下运行gulp的命令，参考gulpfile.js中的备注

发行版命令：gulp完整任务命令：gulp all，过滤layim：gulp all --open

我使用的是gulp all --open

编译完成后将dist文件夹下的table.js复制出来直接替换就可以

里面重要的点就是excel插件的引入路径问题，根据自己项目路径直接修改table.js文件开发的引入即可。

编译过程中遇到的问题

1.node.js版本与gulp版本不兼容，我这采用的node版本是10.16.3

2.安装依赖的时候PhantomJS无法成功引入，用下面的这个命令可以解决

npm install phantomjs-prebuilt@2.1.16 --ignore-scripts