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

Question

I'm able to download successfully using below line of code in AngularJS controller.

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

But, when data is large and it is taking longer time, for this reason I need to enable angular-Spinner. No way I could find a way to start spinner before the call and it should finish after file download finished in the browser.

Root Problem: How can I enable spinner with existing plugin in the project angular-spinner or usSpinnerService? if this has a solution I dont have next question.

To Solve this problem, I have gone through existing spinner working flow. Spinner is working if there is $resource call.

Hence above url I tried by forming factory call like below:

Service:

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

Controller:

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

Using above factory call rest call with an Id of an Object. That Object I need to retrieve and process using Apache POI JAVA library , and Apache POI library will return as an attachement with response header properties in dev tools network tab as follows:

HTTP/1.1 200

X-Content-Type-Options: nosniff

X-XSS-Protection: 1; mode=block

Cache-Control: no-cache, no-store, max-age=0, must-revalidate

Pragma: no-cache

Expires: 0

X-Frame-Options: DENY

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

Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE

Access-Control-Allow-Headers: Content-Type,X-Requested With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers

Access-Control-Expose-Headers: 1,Access-Control-Allow-Origin,Access-Control-Allow-Credentials

Content-Disposition: attachment; filename=LineItems-of_IO-1553-8531Testing_2018-09-18.xlsx

Content-Type: application/vnd.ms-excel

Transfer-Encoding: chunked

Date: Tue, 18 Sep 2018 08:33:46 GMT

In this way I'm able to get spinner but , I am not sure how to download response received as file with specified name in response headers.

using transformResponse: I am expecting responseheaders info, but it is not getting attached to headers in transformResponse: .

So Kindly help me to get spinner is getting triggered for window.location.href=url or help me how download the received data through $resource .

Answer 1

I don't see any way to show spinner while downloading file directly using window.location .

But downloading file from response can be possible. Can you please try below approach?

Delete trasnformResponse from $resource

Write a function to download file

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

Change you function call as

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

First this question has nothing to do with angularjs itself, this is pure js problem. For download there are 2 options:

1. Download file using Ajax and then store it on disk using createObjectURL.
2. Download file usual way ie simple href.

These two are really different: -1st wont work in some browsers -1st gives you full access over request, you can comfortably handle errors etc. -2nd start download in parallel, eg in chrome you can close tab with app, but download will still proceed

In 1st way showing spinner is relatively easy, you do it as for any other request.

In 2nd way you usually do not want to show spinner when download is in progress as browser will show progress for you. However, before download starts - before response came from server you sometimes may want to show some waiting and the only way this can be done is using cookies:

• you add some param to download request eg my-cookie-id=cookie_123
• server sets cookie cookie_123 in response
• after link is clicked you check for this cookie value (eg each 100ms)
• when you see this cookie value, your file is started to download