Question

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

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

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

EDITED：服务器不向我发送文件的内容类型...另外在调用的标题中需要是auth令牌，所以我不能使用带有url的直接打开窗口。代码是：

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

Answer 1

如果没有看到代码调用API，很难回答，但一般来说，执行此操作的方法是发送表单而不是使用ajax。通常情况下，您有一个隐藏的iframe与name="downloadframe"或类似的，然后使用这样的表单：

<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标题并询问用户保存文件的位置。

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

Answer 2

我的第一个猜测是：只是直接请求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);
});

使用javascript

2 个答案: