使用 javascript 从 API 下载文件

Question

我需要使用 JavaScript 强制下载文件。我正在使用 Angular 和 restangular 与 API 进行通信。我现在正在处理来自 API 的文件下载操作... API 返回该文件的原始字节和这些标头：

Content-Disposition:attachment; filename="thefile"
Content-Length:2753

所以我有原始字节，但我不知道如何处理它以将此文件下载到客户端...您能提供一些解决此问题的方法吗？如何处理来自服务器的返回响应以在客户端浏览器另存为对话框中打开？

编辑： 服务器不向我发送文件的内容类型...此外，在调用的标头中需要是身份验证令牌，因此我不能使用带有 url 的直接打开窗口.. 代码是：

vm.downloadFile = function(fileId){
 var action = baseHelpers.one('files/' + fileId + '/content').get();
 action.then(function(result){});
}

Answer 1

我的第一个猜测是：直接请求 API URL 而不是异步请求。你应该可以在你的代码中做这样的事情

$window.location = "http://example.org/api/download"

对于使用 RESTangular 的解决方案，我找到了this snipped，也许你可以试试：

Restangular.one('attachments', idAtt).withHttpConfig({responseType: 'blob'}}.get({}, {"X-Auth-Token": 'token'}).then(function(response) {
    var url = (window.URL || window.webkitURL).createObjectURL(response);
    window.open(url);
});

Answer 2

如果没有看到您的代码调用 API 就很难回答，但通常您这样做的方式是发送 form 而不是使用 ajax。通常，您会有一个带有 name="downloadframe" 或类似名称的隐藏 iframe，然后使用如下形式：

<form id="downloadform" target="downloadframe" method="POST" action="/the/api/endpoint">
<input type="hidden" name="apiParameter" value="parameter-value">
</form>

然后您将填写表单的字段并以编程方式提交。这是一个不使用 Angular 的示例，但调整它会很简单（尽管不是必需的）：

var form = document.getElementById("downloadform");
form.apiParameter.value = "appropriate value";
form.submit();

当浏览器收到响应时，它会看到Content-Disposition 标头并询问用户将文件保存在哪里。

如果您愿意，您甚至可以动态构建表单，而不是使用标记。