数据导出／文件下载实现方案

最新推荐文章于 2023-07-09 10:14:42 发布

lzr_must

最新推荐文章于 2023-07-09 10:14:42 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：技术方案文章标签：技术方案

本文链接：https://blog.youkuaiyun.com/lzr_must/article/details/53118463

技术方案专栏收录该内容

1 篇文章

订阅专栏

本文探讨了三种前端数据导出和文件下载的解决方案：XMLHttpRequest、Ajax结合Link以及使用Iframe。针对大数据量导致的前端性能问题，提出了通过后端生成文件地址并利用Ajax请求和Iframe实现下载，同时通过设置Cookie来监测下载完成状态。这种方案减少了后端工作量，但依赖于后端接口和Cookie，存在跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：项目初期，工期多任务量大，我们选择了kendo grid框架。排序，导出，过滤，分页全部采用了kendo自带的前端配置。优点就是开发特别快，缺点就是当我们的用户量庞大，数据量达到了10w+级别的时候，前端分页太慢。所以过滤排序都要改为后端开发，导致后端开发量增加。由于导出数据量巨大，而且涉及到链表查询，导出速度缓慢，导出需求也提高为可以实时终止导出操作。完成导出后要有提示文案。所以后端崩盘了。。。作为他们的好基友，前端有必要站出来救救他们了。

不瞎扯了，导出方案一共考虑了三种。

1.XMLHttp封装一个ajax方法。

github上也有类似的方案。这里就不细说了。

2.ajax 加 link

location.href 将页面跳转到文件下载地址可以轻松的完成下载需求。但是没发实时终止请求，且下载完成后，并没有对应的event来提示完成下载的文案。
==解决方法==：文件下载的时间基本为后端服务器的链表查询及运算时间，数据的传输时间基本可以忽略。所以ajax请求后端完成链表查询，运算及生成excel等类型文件后，返回文件的地址。我们在用location.href跳转到下载地址即可完成下载。
==优缺点==：文件下载完成的提示时间并不准确（还要等待文件真正的下载时间）。后端工作量偏大，又要开发两个接口，时间紧急，希望前端救火。

3.点击导出按钮弹出莫太框中嵌套iframe src =文件导出的action？time=new Date.valueOf()，请求返回后后端在header中设置cookie = time参数。

==详细描述一下==：window.open(url); 在新的窗口中访问文件的下载action。关闭网页就可以终止下载。但是打开新的窗口不符合业务需求。所以我们在莫太框里嵌套iframe然后把它隐藏，让他加载文件的下载地址。这样关闭莫太框时就终止了文件下载。剩下的问题就是==如何知道什么时候文件下载完成了==？再点击导出按钮，弹出莫太框的时候，我们把点击的时间var time= new Date.valueOf()这个时间戳已参数的形式传递过去。后端运行完成后，response的header中帮我们设置了cookie = 我们传递的时间戳。我们在点击按钮后，监控cookie，当cookie的值和我们本地的点击时创建的time相等时，说明下载完成了。
==优缺点==：依托后端已有的接口，稍作改动即可完成。后端没有太多开发量。下载完成的提示时间基本准确。缺点：如果后端服务挂掉了，不能像ajax一样获得响应。因为功能实现基于cookie，所以跨域请求可能会有些其他问题。
==注意事项==：后端设置cookie时，httponly要设置成false。否者前端没有cookie的读写权限。

“Talk is cheap,show me the code.”

<!--html 文件-->
<!--<div class="modal-header">-->
    <!--<h3 class="modal-title">下载excel</h3>-->
<!--</div>-->
<div class="modal-body">
    <span style="font-size: 16px;text-align: center;display: inherit;">{{download_tips}}</span>
    <iframe id="downloadIframe" ng-show="false" ng-src="{{down_url}}"></iframe>
    <!--<iframe ng-onload="iframeLoadedCallBack()" ng-src="{{down_url}}"></iframe>-->
</div>
<div class="modal-footer">
    <button class="btn btn-warning" ng-click="cancel()">{{btn_info}}</button>
</div>

<script type="text/ng-template" id="sendExcelToEmail.html">
    <div class="modal-body">
        <form name = 'sendEmailForm'>
            <span>导出失败，请取消后重试或通过发邮件的方式发送数据。</span>
            <div class="row">
                <div class="col-xs-10">
                    <input name="email" type="email" class="form-control" placeholder="请输入正确的邮箱" ng-model="email">
                </div>
                <div class="col-xs-2" style="padding:0px">
                    <button ng-disabled="sendEmailForm.email.$invalid || !email" ng-click="submit()" class="btn btn-primary btn-sm" style="width: 60px !important;" >发送邮件</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer" style="padding-top: 0px">
        <button class="btn btn-warning" ng-click="cancel()">取消</button>
    </div>
</script>

<!--js 文件。这里用的是angular封装的一个指令模块-->
'use strict';

angular.module('myApp.excelExportBtn',[])
    .directive('excelExportBtn', ['$uibModal', '$sce',
        function($uibModal, $sce) {
            return {
                restrict: "AE",
                scope:{
                    kendoGridElement:"=kendoGridElement",
                    data:"=data",
                    downUrl:"=downUrl"
                },
                link: function(scope, element, attrs){
                    element.on('click',function(){
                        //console.log(scope.kendoGridElement);
                        var dataSource = scope.kendoGridElement.dataSource;
                        var data = {
                            "sort":dataSource._sort?dataSource._sort[0]:'',
                            "filter":dataSource._filter?JSON.stringify(dataSource._filter.filters):'',
                            "logic":dataSource._filter?dataSource._filter.logic:''
                        };
                        //console.log(data);
                        var clickTime = new Date().valueOf();
                        var modalInstance = $uibModal.open({
                            backdrop: 'static',//禁止点击背景关闭弹框
                            templateUrl: 'modules/directive/excelExportBtn/excelExportBtn.html',
                            controller : 'ExcelExportBtnModalCtrl',
                            size : 'sm',
                            resolve : {
                                urlAndParam: function(){
                                    return {
                                        clickTime:clickTime,
                                        data:data,
                                        down_url:$sce.trustAsResourceUrl(scope.downUrl+'?excelDownStart='+clickTime)
                                    };
                                }
                            }
                        });
                    });
                }
            };
        }
    ])
    .controller('ExcelExportBtnModalCtrl', [
        '$interval', '$cookies', '$scope', '$rootScope', '_http', '_url', '_kendoConfigure', '_getDate', '_dateToString', '$uibModalInstance', '$uibModal', 'urlAndParam',
        function($interval, $cookies, $scope, $rootScope, _http, _url, _kendoConfigure, _getDate, _dateToString, $uibModalInstance, $uibModal, urlAndParam) {
            $scope.down_url = angular.copy(urlAndParam.down_url);
            //console.log($scope.down_url);
            $scope.download_tips = "正在下载，请稍后。。。。";
            $scope.btn_info = "取消下载";
            $scope.download_status = false;//true 下载完成，false 下载未完成。
            var clickTime = urlAndParam.clickTime;

            //setTimeout(function(){
            //    $cookies.put('excelDownStart',clickTime);
            //},15000);

            function checkDownloadFinished(){
                console.log('检测开始');
                if($cookies.get('excelDownStart') == clickTime){
                    $interval.cancel(check_download);//下载完成，终止检测
                    $scope.download_tips = "下载完成";
                    $scope.btn_info = "确定";
                    $scope.download_status = true;
                }
            }
            var check_download = $interval(checkDownloadFinished,500);
            $scope.cancel = function(){
                if($scope.download_status){//下载完成
                    $uibModalInstance.dismiss('cancel'); // 退出
                }else{//停止下载
                    $interval.cancel(check_download);//停止下载，停止检测
                    $uibModalInstance.dismiss('cancel'); // 退出

                    //var modalInstance = $uibModal.open({
                    //    templateUrl: 'sendExcelToEmail.html',
                    //    controller : 'SendExcelToEmailModalCtrl',
                    //    size : 'sm',
                    //    resolve : {
                    //    }
                    //});
                }
            };
        }
    ])
    .controller('SendExcelToEmailModalCtrl',  [
        '$scope', '$rootScope', '_http', '_url','$uibModalInstance',
        function($scope, $rootScope, _http, _url,$uibModalInstance) {

            $scope.submit = function() {
                _http({
                    url: _url.getRegionManagerSelectList,
                    method: 'POST',
                    data:{
                        email:$scope.email
                    }
                })
                .then(function(res){
                    $uibModalInstance.dismiss('cancel'); // 退出
                },function(){
                    $rootScope.globalError('异常错误！');
                    return {};
                });
            };

            $scope.cancel = function() {
                $uibModalInstance.dismiss('cancel'); // 退出
            };
        }
    ]);