如果以文件名的附件形式接收到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值時，便開始下載文件