Question

我正在尝试通过ajax启动文件下载。我可以从服务器检索数据，但无法让浏览器打开数据。我无法将浏览器的location.href指向端点网址。

我要下载的资源是通过需要自定义http标头和身份验证承载令牌的端点公开的。我无法更改后端api以允许cookie。因此，我不能只使用window.open(url,'_blank')

打开网址

我可以向端点发出ajax请求，但在收到回复后我不知道如何下载文件。

$.get( "restAPI/file.pdf", function( data ) {
var w = window.open(null,'_blank')
$(w.document.body).html(data);
});

不起作用

我希望做类似的事情

var w = window.open(data,'_blank')

但这也不起作用。

修改

解决方案，感谢joyBlanks

   $http({method: 'GET',
                    responseType:'arraybuffer',
                    headers: {
                        Accept: 'application/octet-stream',                 
                    }, url:url         }
    ).then(function(data) {
                var blob = new Blob([data.data]);

                if (window.navigator.msSaveBlob)
                    window.navigator.msSaveBlob(blob, filename);
                else {                  
                    var link = document.createElement('a');
                    link.id = filename;
                    link.href = window.URL.createObjectURL(blob);
                    link.download = filename;
                    link.click();
                }
});

Answer 1

现代浏览器支持download代码的<a>属性。

此属性（如果存在）表示作者希望将超链接用于下载资源，以便在用户单击链接时，系统会提示他们将其另存为本地文件。如果属性具有值，则该值将用作当用户单击链接时打开的“保存”提示中的预填充文件名（用户可以在实际保存文件之前更改名称）。对允许值没有限制（虽然/和\将转换为下划线，防止特定的路径提示），但您应该考虑到大多数文件系统在文件名中支持标点符号方面存在限制，并且浏览器很可能相应地调整文件名。

注意：可以与blob：URL和数据：URL一起使用，以便用户轻松下载使用JavaScript以编程方式生成的内容（例如，使用在线绘图Web应用程序创建的图片）。如果HTTP标头Content-Disposition：存在并提供与此属性不同的文件名，则HTTP标头优先于此属性。如果此属性存在且Content-Disposition：设置为内联，则Firefox优先考虑Content-Disposition，例如文件名大小写，而Chrome优先考虑下载属性。此属性仅适用于具有相同来源的资源的链接。

<a download src="restAPI/file.pdf">Download File</a>

因此，当您单击一个标记时，它将显示一个将下载该文件的弹出窗口。从请求中我可以看到该文件已经可用。

您可以阅读更多内容：https://developer.mozilla.org/en/docs/Web/HTML/Element/a

Answer 2

您无法从javascript保存文件。我建议你创建一个调用restAPI的API调用，并在你的web服务器上保存一个临时文件。然后将临时文件名返回到javascript并重定向到它。浏览器应该提示用户打开或保存。这是另一篇文章，详细介绍了这种方法： Web Api won't download file using jQuery Ajax and Basic Auth

从ajax下载的数据文件

2 个答案: