layui重写table自带的导出功能

时间:2024-04-02 21:02:10

以前的项目中前端用的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这个插件

layui重写table自带的导出功能

layui重写table自带的导出功能

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

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

layui重写table自带的导出功能

重新打包编译

  1. 安装依赖

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

2.全局安装gulpnpm install -g gulp

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

发行版命令:gulp完整任务命令:gulp all,过滤layimgulp 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

layui重写table自带的导出功能