如何讓瀏覽器使用angular Resource下載文件？

Question

我有一個 API 服務，它用一個 XLS 文件的緩沖區數組進行響應，並且請求是從 Angular 客戶端發送的。 如何將響應保存為 XLS 文件？

Answer 1

在這里，我有在 IE11、Firefox 和 Chrome 上測試過的可行解決方案。

首先定義一個存儲庫來獲取文件：

'use strict';

(function() {
  var factory = function($resource) {

    return $resource('api/file/:id', {}, {
      'get': {
        method: 'GET',
        responseType: 'arraybuffer',
        transformResponse: function(data, headersGetter) {
          return {
            data: data,
            headers: headersGetter
          }
        }
      }
    });
  };

  factory.$inject = ['$resource'];
  var app = angular.module('yourAppModuleName');
  app.factory('FileRepository', factory);
})();

現在我們可以在我們的控制器中調用FileRepository.get方法。 但請記住，在 IE、Firefox 和 Chrome 中應以不同的方式處理文件下載。

DocumentRepository.get({
  id: myFileId
}).$promise.then(
  function(result) {

    const blob = new Blob([new Uint8Array(result.data)], {
      type: result.headers('Content-Type')
    });

    if (window.navigator.msSaveOrOpenBlob) { // for IE
      //msSaveBlob only available for IE & Edge
      window.navigator.msSaveBlob(blob, "myFileName");
    } else {
      const URL = window.URL || window.MozURL || window.webkitURL || window.MSURL || window.OURL;

      var anchor = document.createElement('a');
      anchor.href = URL.createObjectURL(blob);
      anchor.download = 'myFileName';
      document.body.appendChild(anchor); //For FF
      anchor.target = '_blank';
      anchor.click();
      //It's better to remove the elem
      document.body.removeChild(anchor);
    }
  }, function(error) {
    log.error("Error downloading file: ", error);
  });

Answer 2

如果您的服務器發送正確的標頭信息，如Content-Type: application/vnd.ms-excel和Content-Disposition: attachment; filename="xyz.xls" Content-Disposition: attachment; filename="xyz.xls" ，那么你可以使用$http服務提供下載：

$http.get('myPath/file.xls', {
    responseType: 'arraybuffer'
}).then(function(res) {
    var blob = new Blob(
            [res.data], { type: res.headers('Content-Type') }
        ),
        url = URL.createObjectURL(blob),
        a = document.createElement('a');

    a.href = url;
    a.download = 'your_download';
    a.target = '_blank';
    a.click();
});