一般使用PHP导出Excel表格都会用PHPExcel,但是当遇到要导出大量数据时,就会导致超时,内存溢出等问题。因此在项目中放弃使用这种方式,决定采用前段生成Excel的方式来解决问题。
步骤如下:
- 前端ajax先请求一次后端,获取总的数据个数,假设有1000条
- 然后前端分10次,每次100条ajax请求后台数据,
- 10次ajax都请求成功后(这里使用Promise.all()来处理多次异步请求),将数据合并在一个数组里
- 使用 SheetJS/js-xlsx 生成Excel文件并下载
这种方案额外的好处:
- 用户体验友好,前端可以用进度条来展示10次请求的百分比
- 后台不用额外提供导出Excel的接口,只需要使用查询数据的接口,因为一般查询数据的接口都会有:结果里包含总个数字段、分页查询功能,因此前端只需按上述逻辑调用数据查询接口合并数据即可
参照:https://github.com/hegoku/php-sheetJs-excel
PHP接口代码,这里数据随机生成,实际情况应该是调用数据库获取:
$data=[];
for ($i=1;$i<=100;$i++) { //随机生成数据
$tmp=[
'id'=>($_GET['page']-1)*100+$i,
'name'=>chr(mt_rand(33, 126)).chr(mt_rand(33, 59)).chr(mt_rand(33, 126)).chr(mt_rand(33, 126)) //生成随机名字
];
array_push($data, $tmp);
}
sleep(2); //模拟数据库耗时
echo json_encode([
'code'=>200,
'pagination'=>['count'=>1000],
'data'=>$data
]);
前端代码,这里用了Vue作为前端模板:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- SheetJS js-xlsx library -->
<script src="js/shim.min.js"></script>
<script src="js/xlsx.full.min.js"></script>
<!-- FileSaver.js is the library of choice for Chrome -->
<script src="js/Blob.js"></script>
<script src="js/FileSaver.js"></script>
<!-- FileSaver doesn't work in older IE and newer Safari; Downloadify is the flash fallback -->
<script src="js/swfobject.js">