网站搜索

javascript - AngularJs 应用中的损坏下载


我正在尝试使用 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 需要认证,而那个令牌只存在于 Angular 应用中。仅为了处理没有认证的文件下载而更改服务器并不是一个好的选择。

REST 有像 /files/:id 这样的 URL,访问时会以常规 HTTP 文件下载的方式提供文件内容(如上所述用 cURL 测试过)。$http 可能是问题所在吗?以某种方式强制某种编码或对接收的数据做了假设。我对 Angular 的经验不多。

答案#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。