Layui项⽬前端导出Excel⽂件总结（两种⽅式）
Layui 项⽬前端导出Excel⽂件总结
最近朋友在维护⼀个⼏年前的⽼项⽬，项⽬前端是基于Layui的。我那朋友只接触过vue以及vue相关的⼀些框架，对layui不熟悉，问我LayuI 项⽬有个列表要加个excel导出功能，并且不能改动后端接⼝（后端接⼝代码已经没有了）
Layui excel导出—使⽤portFile
layui下载
我们知道layui table⾃带了Excel导出功能（portFile），可以很⽅便的导出csv 或者 xls⽂件：
参数id：为列表的表格ID
参数data：是传⼊的相应数据
参数type：导出的的⽂件类型（csv 或者 xls）
我们可以在列表查询表格数据加载完成的回调函数中将列表数据保存到本地
var listData = [];
elem: '#表格ID'',
url: url
cols: [],
page: true,
limit: 15,
done: function(res, curr, count) {
//res.data 存储到本地变量
listData = res.data;
}
});
然后我们可以在导出事件⾥⾯传⼊该变量即可
或者我们需要导出当前搜索条件下的所有数据：我们可以使⽤ajax调⽤不分页的数据接⼝，或者后台⽆法改动的话将列表数据获取接⼝，⾃⼰将分页参数的limit设置得很⼤临时解决下。
$.ajax({
url: url,
success: function(res){
}
});
另外portFile⽅法也可以不⽤依赖 table 的实例，可直接导出任意数据
['张三','男','20'],
['李四','⼥','18'],
['王五','⼥','19']
], 'csv'); //默认导出 csv，也可以为：xls
//没有传⼊表格ID，直接传⼊JSON数据
法⼆：
Layui excel导出                —使⽤ layui 的导出扩展插件 l excel
导出excel功能基于 XLSX.js，下载功能基于 FileSaver，读取⽂件基于 H5的 FileReader。并且⽀持复杂表头的导出、⽀持字体设置、单元格边框设置、单元格合并等功能，这些是portFile 所不具备的
- ⽀持梳理导出的数据并导出多种格式数据- ⽀持IE、⽕狐、chrome等主流浏览器- 普通⼯作电脑最多⽀持9列45W⾏数据规模的导出- ⽀持 xlx、xlsx、csv格式的前端数据读取以及数据梳理- ⽀持单个⽂件多个 sheet 的导出- 提供⽅便的列合并辅助⽅法
最简单的⽤法，同portFile
另外导出的时候⽀持列宽等样式的设置，可以通过extend参数传⼊列宽配置参数
npm安装
$ npm i lay-excel
然后使⽤ import 引⼊并调⽤导出函数
import LAY_EXCEL from 'lay-excel';
portExcel(data, '表格导出.xlsx', 'xlsx')
普通脚本引⼊⽅式
<script src="layui_exts/excel.js"></script>
portExcel(data, '表格导出.xlsx', 'xlsx')
Layui插件引⼊
layui.use(['excel'], function (){
var excel = l; //导出逻辑
})
如果是layadmin项⽬，可以把excel.js拷贝⾄lib/extend⽬录在config.js添加extend:excel的引⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。