Question

我可以使用AngularJS控制器中的以下代码行成功下载。

$window.location.href =$rootScope.urlBase+'/dios/download/lineitemexcel/'+$routeParams.id

但是，当数据量很大并且需要更长的时间时，由于这个原因，我需要启用angular-Spinner。我无法找到在调用之前启动微调器的方法，并且应该在浏览器中文件下载完成后才能完成。

根本问题：如何在项目angular-spinner或usSpinnerService中启用具有现有插件的Spinner？如果有解决方案，我没有下一个问题。

为解决此问题，我经历了现有的微调器工作流程。如果有$resource通话，微调器正在工作。

因此在url上方，我尝试通过如下方式形成工厂调用：

服务：

factory('Dios', ['$resource','$rootScope',
        function($resource, $rootScope){
            return $resource($rootScope.urlBase+'/dios/:id/:status/:third/:fourth/:fifth/:pageNo', {}, {
                get: {
                    method: 'GET'
                },
                update: {
                    method: 'PUT'
                },
                getexcel: {
                    method: 'GET',
                    transformResponse: function(data, headers,status){
                        var dataTransformed = {};
                        dataTransformed.data=data;
                        dataTransformed.headers=headers;
                        dataTransformed.status=status;
                        return dataTransformed;
                    }
                }
            });
        }])

控制器：

Dios.getexcel({dios:'dios',third:'download',fourth:'lineitemexcel',fifth: $routeParams.id},function(data){
                console.log(data);
]);

在工厂调用上方使用带有对象ID的剩余调用。我需要使用Apache POI JAVA库进行检索和处理的对象，并且Apache POI库将作为附件返回，并带有以下在开发工具网络标签中的响应标头属性：

HTTP / 1.1 200

X-Content-Type-Options：nosniff

X-XSS-Protection：1；模式=阻止

缓存控制：无缓存，无存储，最大年龄= 0，必须重新验证

编译指示：无缓存

有效期：0

X-Frame-Options：DENY

访问控制允许来源：http://10.218.39.45:9000

Access-Control-Allow-Credentials：true

访问控制允许方法：POST，GET，PUT，OPTIONS，DELETE

访问控制允许标题：内容类型，X请求方式，接受，来源，访问控制请求方法，访问控制请求标题

Access-Control-Expose-Header：   1，访问控制允许来源，访问控制允许凭据

Content-Disposition：附件；   filename = LineItems-of_IO-1553-8531Testing_2018-09-18.xlsx

内容类型：application / vnd.ms-excel

传输编码：分块

日期：星期二，2018年9月18日格林尼治标准时间

通过这种方式，我可以得到旋转器，但是，我不确定如何下载在响应标头中以指定名称作为文件接收的响应。

我期望使用transformResponse:的响应标题信息，但是它没有附加到transformResponse:中的标题中。

因此，请帮助我获取window.location.href=url的微调框，或者帮助我如何通过$resource下载接收到的数据。

Answer 1

使用window.location直接下载文件时，我看不到任何显示微调框的方法。

但是可以从响应中下载文件。您可以尝试以下方法吗？

从$ resource删除trasnformResponse

编写用于下载文件的功能

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";

$scope.downloadFile= function(data, fileName, contentType) {
    var blob = new Blob([data], {
      type: contentType
    });
    var url = URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
//hide spinner here
    window.URL.revokeObjectURL(url);
}

将您的函数调用更改为

Dios.getexcel({dios:'dios',third:'download',fourth:'lineitemexcel',fifth: $routeParams.id},function(data, responseHeader){
    $scope.downloadFile(data, responseHeader()['Content-Disposition'].split('filename=')[1] , responseHeader()['Content-Type']);
]);

Answer 2

首先，这个问题与angularjs本身无关，这是纯粹的js问题。要下载，有2个选项：

使用Ajax下载文件，然后使用createObjectURL将其存储在磁盘上。
按常规方式下载文件，即简单的href。

这两个真的不同： -1st在某些浏览器中不起作用 -1st允许您根据请求进行完全访问，您可以轻松地处理错误等。 -2nd开始并行下载，例如在chrome中，您可以通过应用关闭标签，但下载仍会继续

第一种显示微调器相对简单，您可以像处理其他任何请求一样进行操作。

以第二种方式，您通常不希望在下载过程中显示微调框，因为浏览器会为您显示进度。但是，在开始下载之前-在服务器发出响应之前，您有时可能希望显示一些等待，而唯一的方法是使用Cookie：

您添加了一些参数来下载请求，例如my-cookie-id = cookie_123
服务器设置cookie cookie_123作为响应
点击链接后，您将检查此cookie值（例如，每100ms）
看到此Cookie值时，文件开始下载

如果以文件名的附件形式接收到AngularJS $ resource响应，如何触发Spinner进行文件下载或如何在浏览器中下载文件

控制器：

2 个答案: