使用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){});
}

原文由 Shanoy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 .Net 服务器 上有一个端点

[HttpPost]
[Route("api/tagExportSelectedToExcel")]

和带有 axios 的 React 前端。任务是添加一个按钮，用于从此 API 下载文件。我花了几个小时才找到这个解决方案。我希望这对其他人有帮助。

这就是我所做的：

 axios('/api/tagExportSelectedToExcel', {
    data: exportFilter,
    method: 'POST',
    responseType: 'blob'
}).then(res => resolveAndDownloadBlob(res));

其中 resolveAndDownloadBlob ：

 /**
 * Resolved and downloads blob response as a file.
 * FOR BROWSERS ONLY
 * @param response
 */
function resolveAndDownloadBlob(response: any) {
    let filename = 'tags.xlsx';
    filename = decodeURI(filename);
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url);
    link.remove();
}

原文由 Michael Klishevich 发布，翻译遵循 CC BY-SA 4.0 许可协议