javascript - AngularJs 应用程序中的下载损坏

Question

我正在尝试使用 FileSaver.js 下载文件, 但每当我点击下载按钮时，我都会得到一个损坏的文件。

应用程序由 PHP REST 服务支持，从命令行使用 cURL 确认 REST 工作正常。

这是我用于下载的伪代码的最新版本:

// Let str be the data received from $http promise
// This code is run in a "then" callback

var arr= new Uint8Array(str.length);
for(var i=0; i<str.length; i++) {
    arr[b]=str.charCodeAt(i);
};
var blob = new Blob([arr], {type: 'application/octet-stream'});
saveAs(blob, "AFileName");

它只会损坏文件。

我也尝试过不应用 Uint8Array，而是将 str 直接提供给 Blob。如您所料，它也失败了。

我正在自己编写服务器和客户端，因此我可以更改其中的任何内容。但问题是我想在客户端处理下载，我无法将用户重定向到文件 URL 来下载它，因为 REST 需要身份验证并且该 token 仅存在于 Angular 应用程序中。更改服务器只是为了处理未经身份验证的文件下载并不是一个好的选择。

REST 具有像 /files/:id 这样的 URL，当访问时，将文件内容作为常规 HTTP 文件下载提供(如上所述使用 cURL 测试)。 $http 可能是问题所在吗？以某种方式强制对接收到的数据进行某种编码或某些假设。无论如何，我在 Angular 方面经验不多。

Answer 1

我发现了问题。是我:)

我必须为 $http 指定 responseType: "arraybuffer"，然后将 str 直接提供给 Blob。

固定代码

// Let str be the data received from $http promise
// This code is run in a "then" callback
// Make sure to specify "responseType: "arraybuffer"" for $http

var blob = new Blob([str], {type: 'application/octet-stream'});
saveAs(blob, "AFileName");

我在错误的地方更改了 responseType。