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

步骤如下:

  1. 前端ajax先请求一次后端，获取总的数据个数，假设有1000条
  2. 然后前端分10次，每次100条ajax请求后台数据，
  3. 10次ajax都请求成功后（这里使用Promise.all()来处理多次异步请求），将数据合并在一个数组里
  4. 使用 SheetJS/js-xlsx 生成Excel文件并下载

这种方案额外的好处:

  1. 用户体验友好，前端可以用进度条来展示10次请求的百分比
  2. 后台不用额外提供导出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"></script>

        <script src="js/downloadify.min.js"></script>

    </head>

    <body>

        <div id="app">

            <button ref="export_btn" class="btn btn-primary" style="float:none;margin-left:0;" type="button" @click="exportExcel">

                <span v-show="export_percentage==-1">下载报表</span>

                <span v-show="export_percentage!=-1">导出中:{{export_percentage}}%</span>

            </button>

            <div v-show="export_percentage!=-1" class="progress" style="margin:10px;">

                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="{width:export_percentage+'%'}"></div>

            </div>

        </div>

    </body>

    <script>

    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; //设置当前进度百分比为0for (var i=1; i<=request_times; i++) { // 循环请求次数，构造请求的Promise对象并插入funcs数组var func=newPromise(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<response.body.data.length; 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生成Excelvar aoa=[

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

                    ];

                    //将数据合并for (var i=0; i<values.length; i++) {

                        for (var j=0; j<values[i].length; 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;

                });

            }

        }

    });

    </script>

</html>-->
使用ajax进行异步调用使用:
$.ajax({
    type: 'GET',
    url: "{:Url('redis_test/promise')}",
    data: {'page':i} ,
    async : false,
    dataType: 'json',
    contentType:"utf-8",
    success: function (result) {
        if (result.code==200) {
            for(var i=0; i<result.data.length; i++){ //将后台返回中需要的字段取出
                var item=[];
                item.push(result.data[i].id);
                item.push(result.data[i].name);
                data.push(item);
            }
            complete_count++; //成功请求次数+1
            export_percentage = 100*complete_count/request_times; //设置当前进度百分比

            //alert(export_percentage);
            document.getElementById('isshow').value = '1111';
            resolve(data);
        } else {
            reject(export_percentage);
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        // alert(XMLHttpRequest.status);
        // alert(XMLHttpRequest.readyState);
        // alert(textStatus);
    }
});
 

PHP配合JS导出Excel大量数据的更多相关文章

  1. js导出excel

    function inportEx() { $("#btnEx").text("导出中..."); var fugNumber = "";/ ...

  2. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

  3. EasyUI 如何结合JS导出Excel文件

    出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...

  4. 利用PHPExcel导出excel 以及利用js导出excel

    导出excel的方法output_excel需要依赖PHPExcel 导出csv的方法csv_export不需要 <?php /** * @author ttt */ class ExcelCo ...

  5. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  6. JS导出excel设置下载的标题/与angular结合冲突

    2017.8更新 此功能与angular结合使用时,最后一行 document.getElementById("dlink").click(); 与angular的ng-click ...

  7. [转]tableExport.js 导出excel 如果有负数或是空值 导出前面会自动加上单引号

    原文地址:https://blog.csdn.net/private66/article/details/88718285 tableExport.js  导出excel  如果有负数或是空值 导出前 ...

  8. 浏览器端JS导出EXCEL

    浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

  9. html js 导出excel表格

    这个使用js 导出excel,可以集成其他语言,可以html,php,asp ,java 等,自己喜欢用那种语言就用哪种,使用非常方便.js是使用tableExport.js ,jquery-3.2. ...

随机推荐

  1. Maven整合JaCoCo和Sonar，看看你的测试写够了没

    1 简介 单元测试是保证代码质量的重要一环,而如何衡量单元测试写得好不好呢?覆盖率(Coverage)是一个重要指标.而JaCoCo则是专门为Java提供的用于检测测试覆盖率的工具,英文全称为Java ...

  2. MYSQL（1）— 初识MySQL

    一.MySQL [官网文档]https://dev.mysql.com/doc/refman/8.0/en/ 1-1.Mysql是一个关系型数据库,里面的表数据是可以有联系的,例如多对一,一对多. 1 ...

  3. Nginx 配置文件语法

    一.语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码 ...

  4. WordPress获取某个标签关联的分类

    反过来,我们可能会有这样的需求,既然可以获取某个分类的关联标签,那我能获取某个标签的关联分类吗?答案是可以的,将上面的代码稍微改一下就可以了: function ludou_get_tag_categ ...

  5. MySql建库操作

    mysql创建数据库 create database db_namedefault character set utf8; db_name为数据库名 查看所有数据库 show databases; 查 ...

  6. hashMap探析

    本篇文章包括: 数据结构 各个参数 为什么数组的长度是2的整数次方 为什么要将装载因子定义为0.75 为什么链表转红黑树的阈值为8 hash碰撞 put方法 resize方法 jdk7中数组扩容产生环 ...

  7. 【转】产生n个100以内的随机数，且不能重复

    如何高效产生m个n范围内的不重复随机数(m<=n) 给出的perl写法,以及 JAVA随机数之多种方法从给定范围内随机N个不重复数 的方法三: /** * 随机指定范围内N个不重复的数 * 在初 ...

  8. CSS选择器-类-ID-伪类

    类选择器(Class selectors) 通过设置元素的 class 属性,可以为元素指定类名.类名由开发者自己指定. 文档中的多个元素可以拥有同一个类名. 在写样式表时,类选择器是以英文句号(.) ...

  9. 50个SQL语句(MySQL版) 问题九

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  10. 2020年，哪一款远程桌面（VPS管理器）最值得你期待

    上周,我得知到,iis7远程桌面版本又更新的消息.进入该网站一看,果然如此. 通道:IIS7远程桌面V2.0.1 版本 最新程序截图如下,和老版本相比,果然又高大上了很多: