使用angularJS中的Blob方法破坏下载的文档

时间:2017-02-22 16:23:17

标签: angularjs download blob

下载一个曾经在我的应用程序中正常工作的文件,直到我将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文件,它只显示http://oi68.tinypic.com/2i11m9y.jpg

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:4)

https://hastebin.com/yivaterozi.js处的代码似乎已从使用已弃用的$http.success()方法更新为当前$http.then()。诺&#39;成功回调函数(在then方法内)只接收一个对象参数:https://docs.angularjs.org/api/ng/service/ $ http。弃用&#39;成功&#39;方法获得了更多参数(数据,状态,标题)和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 });

或只是将参数数据更改为响应,并将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();
    ...
    ...