Angular - 保存传入文件以响应 $resource 请求答案

【问题标题】：Angular - Save incoming file in response to $resource requestAngular - 保存传入文件以响应 $resource 请求
【发布时间】：2016-08-04 03:10:57
【问题描述】：

我有一个角度服务。我正在使用 $resource 向我的 API 发送请求。 API 正在发送一个应该下载的文件。如何保存？

注意：我的 API 已经发送标头，使浏览器下载文件。

如果我直接从浏览器访问 API，文件会下载。但是，如果我从 $resource 访问 API，什么都不会发生。

API：

res.writeHead(200, {
    'Content-Type': 'application/octet-stream',
    "content-disposition": "attachment;"
});
res.end(fileText);

【问题讨论】：

它是什么请求类型？如果是 GET，请尝试对链接使用下载属性。
GET、POST 都不起作用。下载属性？

标签： angularjs

【解决方案1】：

更新：

我为此找到了一个完整的工作解决方案，并且与旧答案不同，它适用于 FF 和 IE：

var blob = new Blob([response], {type: 'text/json'});

// FOR IE:
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
}

// For Other browsers (tested on Chrome, FF)
else{
    var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');

    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    e.initEvent('click', true, false, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

旧答案：

感谢 topless 指导我找到正确的答案。以下是我的工作方式：

myService.exportData().$promise.then(function (response) {
    var anchor = angular.element('<a/>');
    anchor.attr({
        href: 'data:attachment/json,' + encodeURI(JSON.stringify(response)),
        target: '_blank',
        download: 'exported logs.log'
    })[0].click();

})

另外，现在我不需要在 API 端设置标头。 res.send(myFileText) 工作得很好！

注意：不适用于 IE 和 SAFARI

【讨论】：

唯一的问题是它在IE和Safari中不起作用。

【解决方案2】：

尝试提供一个文件名，如果它是 json 类型，否则相应地更改 content-type。

"Content-Type": 'application/json'
"content-disposition": "attachment;filename=fname.json"

【讨论】：

不，仍然没有。如果直接从浏览器访问而不提供文件名，它可以工作
你可以试试this 或者更好更优雅简单的答案，比如this？
我正在尝试 Blob 解决方案，但这似乎不是正确的方法。也会试试这个