php 导出数据js,PHP配合SheetJS/js-xlsx导出Excel大量数据

PHP配合SheetJS/js-xlsx导出Excel大量数据

时间: January 17, 2018

分类: 开发

一般使用PHP导出Excel表格都会用PHPExcel，但是当遇到要导出大量数据时，就会导致超时，内存溢出等问题。因此在项目中放弃使用这种方式，决定采用前段生成Excel的方式来解决问题

步骤如下:

前端ajax先请求一次后端，获取总的数据个数，假设有1000条

然后前端分10次，每次100条ajax请求后台数据，

10次ajax都请求成功后(这里使用Promise.all()来处理多次异步请求)，将数据合并在一个数组里

这种方案额外的好处:

用户体验友好，前端可以用进度条来展示10次请求的百分比

后台不用额外提供导出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

]);复制代码

接口返回的json格式为：

{

"code": 200,

"pagination": {

"count": 1000

},

"data": [

{

"id": 101,

"name": "$5yG"

},

{

"id": 102,

"name": "g'zP"

},

{

"id": 103,

"name": "2!$`"

},

{

"id": 104,

"name": "a&2j"

},

{

"id": 105,

"name": "[/N+"

},

...

]

}复制代码

前端代码，这里用了Vue作为前端模板:

下载报表

导出中:{{export_percentage}}%

var app=new Vue({

el: '#app',

data: function(){

return {

export_percentage:-1,

count:10000

}

},

methods: {

exportExcel: function(){

var self=this;

var request_times=Math.ceil(this.count/100); //计算分几次请求

var funcs=[]; //Promise.all要用到的参数, 存放每次请求的Promise对象

var complete_count=0; //成功请求次数

this.export_percentage=0; //设置当前进度百分比为0

for (var i=1; i<=request_times; i++) { // 循环请求次数，构造请求的Promise对象并插入funcs数组

var func=new Promise(function(resolve, reject){ //定义Promise并处理请求逻辑

var data=[];

self.$http.get(

'a.php',

{ params: {page:i} }

).then(function(response){

if (response.body.code==200) {

for(var i=0; i

var item=[];

item.push(response.body.data[i].id);

item.push(response.body.data[i].name);

data.push(item);

}

complete_count++; //成功请求次数+1

self.export_percentage=100*complete_count/request_times; //设置当前进度百分比

resolve(data);

} else {

reject();

}

});

});

funcs.push(func);

}

Promise.all(funcs).then(function(values){ //使用Promise.all调用funcs里面的函数，并合并数据，最后给js-xlsx生成Excel

var aoa=[

['ID', '名称'] //第一行标题

];

//将数据合并

for (var i=0; i

for (var j=0; j

aoa.push(values[i][j]);

}

}

var ws = XLSX.utils.aoa_to_sheet(aoa);

var wb=XLSX.utils.book_new();

wb.SheetNames.push('sheet1');

wb.Sheets['sheet1'] = ws;

var wopts = { bookType:'xlsx', bookSST:false, type:'array' };

var wbout = XLSX.write(wb,wopts);

saveAs(new Blob([wbout],{type:"application/octet-stream"}), "data.xlsx");

self.export_percentage=-1;

});

}

}

});

复制代码