使用 angularJS 中的 Blob 方法下载的文档被损坏答案

【问题标题】：Downloaded document getting corrupted using Blob method in angularJS使用 angularJS 中的 Blob 方法下载的文档被损坏
【发布时间】：2017-07-12 19:48:19
【问题描述】：

在我将 Angular 升级到最新版本之前，下载一个在我的应用程序中可以正常工作的文件。即使是现在，该文件仍在下载，但问题是它已损坏。上传文件工作正常，如果我们签入文件服务器，文件将完好无损。但下载后，我的文件已损坏。

HTML：

<td data-title="''">

    <a tooltip="Download CV" ng-hide="!talent.resumePath" tooltip-trigger tooltip-animation="false" tooltip-placement="bottom" ng-click="downloadResume(talent.id)" data-placement="top" data-toggle="tooltip" data-original-title="resume">
        <img src="../../img/DownloadIcon.png" /></a>
</td>

控制器：

downloadResume: function(employeeId) {
    return apiServices.getFileFromTalentPool('/talentpool/resume?id=' + employeeId)
 },

在哪里，getFileFromTalentPool 是：https://hastebin.com/yivaterozi.js

端点：

public FileResult GetResume(int id) {
    var result = _services.GetResume(id);
    if (result != null) {
        HttpContext.Response.ContentType = result.ContentType;
        HttpContext.Response.Headers["Access-Control-Expose-Headers"] = "FileName";
        HttpContext.Response.Headers["FileName"] = result.FileDownloadName;
    }
    return result;
}

通常我会下载 Doc 文件。我尝试使用记事本文件查看是否相同。奇怪的是，我注意到我可以打开记事本文件，但它的内容被操纵成[object Object] 之类的东西。但对于 Doc 文件，它只显示：

我该如何解决这个问题？

【问题讨论】：

标签： angularjs download blob

【解决方案1】：

看起来https://hastebin.com/yivaterozi.js 的代码已从使用已弃用的$http.success() 方法更新为当前的$http.then()。 Promise 的成功回调函数（在then 方法内）只接收一个对象参数：https://docs.angularjs.org/api/ng/service/$http。已弃用的“成功”方法获得了更多参数（数据、状态、标题）并且data 已经包含原始数据。使用then() 时，数据位于响应的data 属性下，因此请尝试将您的$http 调用更改为：

$http({
  method: 'GET',
  cache: false,
  url: fileurl,
  responseType:'arraybuffer',
  headers: {
    'Authorization': "Bearer " + $rootScope.userInfo.access_token,
    'Access-Control-Allow-Origin': '*'
  }
}).then(function (data) {
  var octetStreamMime = 'application/octet-stream';
  var success = false;

  // Get the headers
  var headers = data.headers();
    ...
    ...

请注意，此处的标头是从数据对象中获取的，而不是从第三个参数中获取的（只需添加 var，因为我们删除了空参数）。现在在您使用 data 的每个地方，将其更改为 data.data，例如：

// Try using msSaveBlob if supported 
var blob = new Blob([data.data], { type: contentType });

或者只是将参数 data 更改为 response 并将 var data = response.data; anf modify headers getter 添加到 headers = response.headers();:

$http({
  method: 'GET',
  cache: false,
  url: fileurl,
  responseType:'arraybuffer',
  headers: {
    'Authorization': "Bearer " + $rootScope.userInfo.access_token,
    'Access-Control-Allow-Origin': '*'
  }
}).then(function (response) {
  var octetStreamMime = 'application/octet-stream';
  var success = false;

  // Get data
  var data = response.data;

  // Get the headers
  var headers = response.headers();
    ...
    ...

【讨论】：