javascript - 如何使浏览器使用 Angular 资源下载文件？

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

现在我们可以在 Controller 中调用 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);
  });