下载的文件在angularJS中使用Blob方法损坏 [英] Downloaded document getting corrupted using Blob method in angularJS

问题描述

在我的应用程序中下载用于正常工作的文件，直到我将Angular升级到最新版本。即使现在，该文件正在下载，但问题是它正在被破坏。上传文件工作正常，如果我们检入文件服务器，文件将保持不变。但是下载后，我的文件被损坏了。

Downloading a file used to work fine in my application until I upgraded Angular to the latest. Even now, the file is getting downloaded, but the issue is that it is getting corrupted. Upload file is working fine and if we check in the file server, the file will be intact. But upon download, I am getting corrupted file.

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

Where, getFileFromTalentPool is : 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

Usually I download Doc files. I tried with a notepad file to see if it's the same. Strangely, I noticed that I am able to open the notepad file, but its content is manipulated to something like [object Object]. But for Doc files, it just shows http://oi68.tinypic.com/2i11m9y.jpg

我如何解决这个问题？

推荐答案

https://hastebin.com/yivaterozi.js 上的代码已从使用已弃用的 $ http.success（）方法到当前 $ http.then（）。 Promise'成功回调函数（在然后方法中）只接收一个对象参数： https://docs.angularjs.org/api/ng/service/ $ http。已弃用的成功方法获得了更多的参数（数据，状态，标题）和数据已经包含原始数据。当使用 then（）时，数据位于数据属性的响应下，所以尝试更改您的 $ http 调用：

it looks like the code at https://hastebin.com/yivaterozi.js was updated from using deprecated $http.success() method to current $http.then(). Promise' success callback function (within then method) receives only one object argument: https://docs.angularjs.org/api/ng/service/$http. Deprecated 'success' method got more arguments (data, status, headers) and data already contained raw data. When using then(), data is located under data property of response, so try to change your $http call to:

$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 ，如：

please note that headers are fetched correct here from the data object and not from the third argument (just add var, since we removed empty arguments). Now in each place that you use data, change it to data.data, like:

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

或只是将参数数据更改为响应并添加 var data = response.data; anf将标题getter更改为 headers = response.headers（）; ：

or just change argument data to response and add var data = response.data; anf modify headers getter to 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();
    ...
    ...

这篇关于下载的文件在angularJS中使用Blob方法损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！