Question

情况：

文件位于AWS S3上
用户按下按钮下载文件
请求被发送到服务器
响应中的服务器发送生成的URL以授予对文件的访问权限
- 课程的网址链接到另一个域（到S3存储桶）

目前的解决方案：

现在JS处理程序将窗口的位置更改为收到的URL。
文件按原样下载。
但浏览器会抛出以下错误：
- Chrome：“资源被解释为文档但使用MIME类型application / octet-stream传输”
- Safari：“无法加载资源：帧加载中断”

我无法用简单的<a href="url" download>替换该按钮，因为该URL是根据用户的请求生成的，并且事先不知道。

我希望它是一键式体验（即，我不希望用户点击带有收到的网址的新按钮）。

问题：

允许用户在生成URL时下载文件的正确方法是什么？
为此目的更改window.location是否可以？

Answer 1

更改下载文件的window.location是不对的。

如果您使用<a>标记，则可以添加download attribute

 <a href="my.pdf" download="your.pdf" >download file</a>

如果您更喜欢使用代码，可以使用以下脚本：

 var aTag = document.createElement('a');
 aTag.setAttribute('download','your.pdf');
 aTag.setAttribute('href','my.pdf');
 aTag.click();

Answer 2

正确的方法是让后端在链接下载请求中使用正确的MIME类型的文件发送正确的Content-Type标头。

可以将window.location或document.location.href更改为页面重定向到下载链接。

Answer 3

这实际上是一个非常简单的问题，根本不需要Javascript。

只需单击链接发送请求即可将请求发送到服务器，服务器在验证请求后生成签名URL，然后响应...

HTTP/1.1 302 Found
Location: https://example-bucket.s3.amazonaws.com/... # new signed URL

浏览器遵循重定向并获取资源。

Answer 4

如果您可以对收到的URL（下载URL ）执行 GET 请求：

只需打开一个新标签：

window.open(downloadUrl, "_blank");

通过这种方式，浏览器开始下载文件，然后新选项卡将自动关闭。

如果您有义务对下载网址执行 POST 请求：

暂时将隐藏的表单注入当前页面，然后提交：

var form = $('<form action="' + downloadUrl + '" method="POST" target="_blank">'
+ '<input name="param1" value="value1" />'
+ '</form>');

form.appendTo(document.body);

$(form).submit();

form.remove();

此处的键是 target =“ _ blank” 表单的属性。今天，Chrome将自动关闭新标签页，而Safari则不会。但是两者都下载了文件。

允许用户在生成URL时下载文件的正确方法

4 个答案: