以前的项目中前端用的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就还是直接调用原来的导出逻辑。
重新打包编译
-
安装依赖
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 [email protected] --ignore-scripts