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

Question

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

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

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

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

为了解决这个问题，我已经完成了现有的微调器工作流程。 如果有$resource调用，则微调器正在工作。

因此，在上面的网址中，我尝试通过形成如下的工厂调用来尝试：

服务：

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);
]);

将上述工厂调用rest调用与对象的id一起使用。 我需要使用Apache POI JAVA库进行检索和处理的对象，并且Apache POI库将作为附件返回，并带有在dev tools网络选项卡中的响应标头属性，如下所示：

HTTP / 1.1 200

X-Content-Type-Options：nosniff

X-XSS-Protection：1； 模式=块

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

语法：无缓存

过期：0

X-Frame-Options：DENY

Access-Control-Allow-Origin： http : //10.218.39.45 : 9000

访问控制允许凭据：true

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

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

Access-Control-Expose-Header：1，Access-Control-Allow-Origin，Access-Control-Allow-Credentials

内容处置：附件； 文件名=了LineItem-of_IO-1553-8531Testing_2018-09-18.xlsx

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

传输编码：分块

日期：2018年9月18日星期二08:33:46 GMT

这样，我就可以得到Spinner，但是，我不确定如何下载在响应标头中以指定名称作为文件接收的响应。

使用transformResponse:我期待有responseheaders信息，但它没有附加到transformResponse:头上。

因此，请帮助我让window.location.href=url触发微调器，或帮助我如何通过$resource下载接收到的数据。

Answer 1

使用window.location直接下载文件时，我看不到任何方式显示微调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问题。 下载有两个选项：

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

两者实际上是不同的：-1st在某些浏览器中无法使用-1st使您可以完全根据请求进行访问，可以轻松地处理错误等。-2nd并行开始下载，例如在chrome中，您可以使用app关闭选项卡，但下载仍继续

在第一种显示Spinner的方式中，相对简单，您可以像处理其他任何请求一样进行操作。

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

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