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

问题描述

下载以前在我的应用程序中运行良好的文件，直到我将 Angular 升级到最新版本.即使现在，该文件正在下载，但问题是它已损坏.上传文件工作正常，如果我们检查文件服务器，文件将完好无损.但是在下载时，我的文件已损坏.

HTML :

<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 已从使用已弃用的 $http.success() 方法更新为当前的 $http.then().Promise 的成功回调函数(在 then 方法中)只接收一个对象参数:https://docs.angularjs.org/api/ng/service/$http.已弃用的成功"方法获得了更多参数(数据、状态、标题)并且 data 已包含原始数据.使用 then() 时，数据位于响应的 data 属性下，因此尝试将 $http 调用更改为:

$http({方法:'获取'，缓存:假，网址:文件网址，responseType:'arraybuffer',标题:{'授权':承载"+ $rootScope.userInfo.access_token，'访问控制-允许-来源':'*'}}).then(函数(数据){var octetStreamMime = '应用程序/八位字节流';var 成功 = 假；//获取标题var headers = data.headers();......

请注意，这里从数据对象而不是从第三个参数中正确获取标题(只需添加 var，因为我们删除了空参数).现在，在您使用 data 的每个地方，将其更改为 data.data，例如:

//如果支持，请尝试使用 msSaveBlobvar blob = new Blob([data.data], { type: contentType });

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

$http({方法:'获取'，缓存:假，网址:文件网址，responseType:'arraybuffer',标题:{'授权':承载"+ $rootScope.userInfo.access_token，'访问控制-允许-来源':'*'}}).then(函数(响应){var octetStreamMime = '应用程序/八位字节流';var 成功 = 假；//获取数据var data = response.data;//获取标题var headers = response.headers();......

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> 

Controller :

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

Where, getFileFromTalentPool is : https://hastebin.com/yivaterozi.js

Endpoint :

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

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:

How can I fix this?

解决方案

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

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

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屋！