js从服务器获取数据生成CSV

前言:自己的商城的业务量上来了，很多订单需要导出然后拿去发货，之前都是直接PHPExcel在服务器直接生成了然后直接导出。这在之前是可以正常导出，但是现在订单量的增多导致time-out，所以寻求一种多数据导出的功能，于是就采用了CSV。
废话不多说，直接上代码

<script>
    var exports = {};
    exports.content = "";
    exports.fileName = 'filename';//默认导出文件名
    //导出表格的标题名字
    exports.outFieldsName = [];
    //导出表格的字段
    exports.outFields = [];
    exports.data = [];
    //data: 数据数组，每个元素都包含outFields中指定的字段名
    exports.createCSVStr = function() {
        var textField = '"';
        var content = "";
        var len = 0,
            n = 0,
            comma = "",
            value = "";
        try {
            exports.outFieldsName.forEach(function(_field) {
                content = content + comma + _field;
                comma = ",";
            });
            content = content + "\r\n";
            len = exports.data.length;
            n = exports.outFields.length;
            for (var i = 0; i < len; i++) {
                comma = "";
                for (var m = 0; m < n; m++) {
                    var _field = exports.outFields[m];
                    value = exports.data[i][_field];
                    if (!value && typeof value !== "number") {
                        value = "";
                    }
                    //在这里我做了一些过滤，过滤条件是根据自己内容设计的
                    if (value && /[",\r\n]/g.test(value)) {
                        value = textField + value.replace(/(")/g, '""') + textField;
                    }
                    try{
                        value = value.replace(/\r\n/g,"").value.replace(/\n/g,"");
                    }catch (e){}
                    content = content + comma + value;
                    comma = ",";
                }
                content = content + "\r\n";
            }
        } catch (err) {
            console.log(err);
            content = "";
        }
        exports.content += content;
    };
    exports.createLink = function(){
    //当然，数据为空则提示不能导出
        if(exports.content === ''){
            alert('数据出错，请重试');
            return false;
        }
        //转成Blob可以导出比较大的数据，比如一次导出5万单
        var blob = new Blob(["\ufeff" + exports.content], {type: 'text/csv'});
        var alink = document.createElement('a');
        alink.setAttribute("href", URL.createObjectURL(blob));
        alink.target = '_blank';
        alink.download = exports.fileName+'.csv';
        alink.click();
    }
    exports.clear = function(){
        exports.content = '';
    }
    exports.excuted = function(){
        exports.createCSVStr();
        exports.createLink();
        exports.clear();
    }
</script>

然后在这里进行数据读取。这里的后台程序我就不贴上来了。后台实现逻辑是一次读需要的订单的id，然后返回给前端，前端将id分批次的post给后台来获取详情。然后组合就OK

<script>
    var loading = {}//进度条
    $('.lodingSelf').hide();
    //获取订单号
    window.testRport = function(type) {
        $('.lodingSelf .progress-bar').css('width','0.1%');
        $('.lodingSelf').show();
        exports.data = [];
        exports.outFields = [];
        exports.outFieldsName = [];
        loading.total = 0;
        loading.current = 1;
        if(type === 1) {
            $.get('/bns/admin/export?m=excel&o=order&type=goodtype&areatype=north_order&testReport=report', function (r) {
                for(let index in r.data){
                    loading.total ++;
                }
                exports.fileName = r.date_form+'_'+r.date_to;
                //显示显示条
                getDetailOrdersList(r.data,'goodtype');
            })
        }else if(type === 2) {
            $.get('/bns/admin/export?m=excel&o=order&type=goodtype&testReport=report', function (r) {
                for(let index in r.data){
                    loading.total ++;
                }
                exports.fileName = r.date_form+'_'+r.date_to;
                //显示显示条
                getDetailOrdersList(r.data,'goodtype');
            })
        }else if(type === 3) {
            $.get('/bns/admin/export?m=excel&o=order&type=goodtype&areatype=south_order&testReport=report', function (r) {
                for(let index in r.data){
                    loading.total ++;
                }
                exports.fileName = r.date_form+'_'+r.date_to;
                //显示显示条
                getDetailOrdersList(r.data,'goodtype');
            })
        }else if(type === 4){
            $.get('/bns/admin/export?m=excel&o=order&testReport=report', function (r) {
                for(let index in r.data){
                    loading.total ++;
                }
                exports.fileName = r.date_form+'_'+r.date_to;
                //显示显示条
                getDetailOrdersList(r.data,'');
            })
        }else{
            return false;
        }
    }
    //获取内容
    function getDetailOrdersList(data,type){
        let dataTemp = [];
        loading.current += 100;
        //在这里更新进度条
        $('.progress .progress-bar').css('width',parseInt(loading.current/loading.total*100)+'%');
        var i = 0;
        for(let index in data){
            dataTemp.push(data[index]);
            delete data[index];
            i++;
            if(i>100){
                break;
            }
        }
        if(dataTemp.length < 1){
            exports.excuted();
            $('.lodingSelf').hide();
            return false;
        }
        $.post('',{ids:dataTemp,type:type},function(r){
            for(let index in r.data){
                exports.data.push(r.data[index]);
            }
            if(exports.outFields.length < 1) {
                for (let index in exports.data[0]) {
                    exports.outFields.push(index);
                }
                for(let index in r.title) {
                    exports.outFieldsName.push(r.title[index]);
                }
            }
            getDetailOrdersList(data,type);
        }).error(function(){
            alert('网络错误，请重试');
            $('.lodingSelf').hide();
        });
    }
</script>

进度条采用的bootstrap的进度条

<div class="lodingSelf" style="
    width: 50%;
    height: 136px;
   background: rgba(189, 189, 189, 0.7);
    position: fixed;
    top: 25%;
    left: 25%;
    padding: 45px 25px;
    display: none;
        z-index: 99;
    ">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60"
             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        </div>
    </div>
    <h4>导出中，请稍后···</h4>
</div>