欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

烦人的运营后台导出大批量数据

程序员文章站 2022-04-02 23:40:00
线上运行的业务已经跑了一段时间了，运营需要定期导出数据作分析，领导把小D叫过来说这个需求比较紧急，需要尽快上线，小D信誓旦旦的说没问题，一会儿就搞定。 小D水平还不错，果然，用了不到2小时时间就把导出做好了。小D是这么实现的，做了个新的接口，接口里面循环处理数据列表然后输出，浏览器收到respons ......

线上运行的业务已经跑了一段时间了，运营需要定期导出数据作分析，领导把小D叫过来说这个需求比较紧急，需要尽快上线，小D信誓旦旦的说没问题，一会儿就搞定。

小D水平还不错，果然，用了不到2小时时间就把导出做好了。小D是这么实现的，做了个新的接口，接口里面循环处理数据列表然后输出，浏览器收到response后根据header信息将文件下载下来，在测试环境试了下没问题就上线了，然后处理其他事情去了。

第二天一大早，小D正在地铁上看着自己涨停的股票偷着乐呢，领导电话救过来了，让小D赶紧来公司，小D还在想难道领导因为我昨天做得好要表扬我？听刚才领导的语气不太像啊！

一到公司小D就找领导去了，领导板着脸，面无表情地说，你看你昨天做的啥东西，导出的列表跟线上的列表差了好多，快看看出啥问题了。

小D果然水平不错，用了不到10分钟就查到问题了，线上数据量太大，循环超过时间之后PHP脚本就退出了，导致数据导出一半就断掉了。小D分析了下，现在超时时间是5s，时间太短了，按现在数据量估算大概得20s左右，于是小D很快出了新的方案：导出脚本执行时间延长到60s，这样就不会有问题了。很快新的方案上线了，领导还特意亲自操作了下，果然完整的导出来了，领导脸上漏出了欣慰小笑容。

由于大家的共同努力，业务发展迅速，过了2个月，导出不完整的问题又出现了。领导很生气，下班前，把小D交到办公室，让小D把刚他的实现思路讲一遍。小D巴拉巴拉.....一会儿就说完了。领导听完之后，沉思了几秒，对小D说，我给你讲个故事吧：”小李生病了，耳朵不太好，自己放屁的声音也听不见，就跑到医院去看大夫，大夫给小李开了3顿药，让小李每顿饭后吃。小李问大夫，医生，我吃完药耳朵就好了是吧，医生微微抬起头，扶了扶眼镜说，不是，吃完这个药之后屁声儿大。“。听到这里，不争气的小李没憋住，噗嗤笑出来了，领导气不打一处来，正要发火，这个时候小李手机摔地上了，碰到了手机按键，屏幕亮了，领导看到了小D的屏保，也就是小D的女朋友，心里一紧一颤一哆嗦，刚才的火又完全消下去了，心想，小D这个朋友我交定了。领导又语重心长的对小D说，我给你讲这个故事是想让你知道解决问题不能治标不治本，不能因为业务的发展，功能直接done掉，最好能做到不受业务发展影响，这样吧，我给你个思路，html中有个标签<a download="downlaod.txt" href="data:text/txt;charset=utf-8,download Test Data">download</a>，点击它就可以将这个文件下载下来，你可以在前端做个buffer，将所有内容请求完之后再一次下载下来。小D半信半疑的点点头，领导皱着眉头说你听明白了吗，如果没明白晚上去你家里给你辅导辅导。小D刷一下子回过神来，连连点头说明白了明白了。

小D回家之后，没顾得吃饭就打开电脑，沿着领导的线索去解决问题。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <a download="测试.txt" href="data:text/txt;charset=utf-8,你好，Hello world, 这是一个测试">下载</a>
</body>
</html>

当运行上面的代码后，点击下载，果然下载了一个名叫测试.txt的，文件内容是你好，Hello world, 这是一个测试的文件，小D想，要是我把循环移到前端来，每次请求结果放到buffer中，请求完之后，将结果写入a标签的herf中，然后触发点击动作，不是就下载下来了吗，这样就不会因为数据量的增大而导出中断了。小D窃喜，很快，小D做了下面的模拟

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script type="text/javascript">
    $(function() {
      var data = "";
      for (var i =0; i< 100; i++) {
        data += "" + i +"\n";
      }
      $("#test").attr("href", "data:text/csv;charset=utf-8,"+data);
      $("#test")[0].click();
    });
  </script>
</head>
<body>
  <a id="test" download="测试.txt" href="#">下载</a>
</body>
</html>

当我们打开页面的时候就会自动下载一个名为测试.txt的文件，其中for循环模拟的是ajax请求，每次请求是一页的数据。

小D在github上面搜了下，发现还真有人已经对这个操作做了封装，开开心心的将项目下载到本地，结合自己的业务做了第一版出来，其中结合了bootstrap，加了进度条，导出时间比较长的时候心里有个数：

# 需包含FileServer.js，并修改，去掉代码最前面的var
function ExportData(dataUrl, params, paramPageName, pageStart, pageEnd, exportName) {
    this.dataUrl = dataUrl;
    this.params = params;
    this.paramPageName = paramPageName;
    this.pageStart = pageStart;
    this.pageEnd = pageEnd;
    this.exportName = exportName;
    this.buffers = [];
}

ExportData.prototype.toggleProgressBar = function (show, percent) {
    show = !!show;
    var id = "export-progress-bar";
    if (show) {
        if (percent) {
            var showPrecent = "" + percent + "%";
            $("#"+id + " div.progress-bar").css("width", showPrecent).html(showPrecent);
        } else {
            var html = "<div id='" + id + "' style='position:absolute;padding: 100px;width: 100%;height: 100%;top: 0;left: 0;background: #000;opacity: 0.8;z-index: 99'>" +
                "<div class='progress' style='margin-top: 200px'>" +
                "<div class='progress-bar' style='width: 0%'>" +
                "0%" +
                "</div>" +
                "</div>" +
                "</div>";
            $("body").append($(html));
        }

    } else {
        $("#"+id).remove();
    }
}

/**
 * 导出
 */
ExportData.prototype.export = function () {
    var _ExportData = this;
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
    (async function () {
        _ExportData.toggleProgressBar(true);
        await sleep(50);
        _ExportData.params[_ExportData.paramPageName] = _ExportData.pageStart;
        while (true) {
            if (_ExportData.params[_ExportData.paramPageName] > _ExportData.pageEnd) {
                break;
            }
            var showPercent = 100 * Math.ceil(_ExportData.params[_ExportData.paramPageName] - _ExportData.pageStart + 1) / (_ExportData.pageEnd - _ExportData.pageStart + 1);
            showPercent = showPercent.toFixed(2);

            console.log("开始处理第["+_ExportData.params[_ExportData.paramPageName]+"]页数据");
            $.ajax({
                url: _ExportData.dataUrl,
                async: false,
                type: "get",
                dataType:"text",
                data: _ExportData.params,
                success: function(data) {
                    _ExportData.buffers.push(data);
                }
            });
            _ExportData.toggleProgressBar(true, showPercent);
            await sleep(500);

            _ExportData.params[_ExportData.paramPageName]++
        }

        fileSaver(new Blob(
            _ExportData.buffers,
            {
                type:"application/vnd.ms-excel"
            }),
            _ExportData.exportName
        );
        _ExportData.toggleProgressBar(false);
    })();
};

使用的时候也比较简单，如下所示：

var exportData = new ExportData(
    "/path/to/api",
    {
        pageSize: 100
    },
    "pageNum",
    1,
    100,
    "export-org-list.csv"
);
exportData.export();

这里要注意，我封装为了统一，接口返回的时候类型必须是text/plain，纯文本，不然解析可能会失败，导致最终处理失败，另外，如果是csv文件的话，需要在文件最前面加上BOMecho chr(239).chr(187).chr(191)，不然可能会解析乱码。

烦人的运营后台导出大批量数据
第二天一大早，小D就拿着这个方案去找领导，巴拉巴拉把原理和实现讲了一遍，听完之后，领导微微点了点头，漏出了欣慰又遗憾的表情，欣慰小D朽木可雕，遗憾没有机会接触小D的女朋友了。

晚上回到家里，小D仔细一想，这个方案里面用到的新浏览器特性比较多，可能会有浏览器不支持，马上查了下新特性的兼容性。

烦人的运营后台导出大批量数据
Blob是用来保存大量数据的，如果数据全放到url后面，可能有问题，比如双引号，单引号之类的，Blob中就不会，它是以二进制方式存储，herf后面只会是一个用createObjectURL生成的指向Blob内容的uri，比如blob:https://www.baidu.com/5d6222a7-cb7b-5f4b-8381-bde1cbed1b31。

烦人的运营后台导出大批量数据
async function是用来实现sleep的，让浏览器做到真正的sleep，不然进度条没法再多个ajax请求之间刷新。

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time)); }

结合上面的信息可以看到主流浏览器基本都是支持的，而且是后台运营使用的，可以满足条件了，如果要所有浏览器都支持，这个可能不是一个很好的方案。

至此，问题基本解决了，小D脸上漏出了欣慰的笑容，终于可以和女朋友开开心心了。

完

参考文章

上一篇： Linux系统将http转为https之六脉神剑

下一篇： 你有多疼我？

推荐阅读