触发 Web 浏览器下载 blob 响应答案

【问题标题】：Trigger web browser download of blob response触发 Web 浏览器下载 blob 响应
【发布时间】：2014-07-31 15:48:42
【问题描述】：

我正在使用响应类型 arraybuffer 对我的服务器进行 POST 调用，它当前正在返回一个带有以下标题的 PDF blob：

"Content-Type": "application/pdf"
"Content-Transfer-Encoding": "binary"
"Content-Disposition": "attachment;filename=file.pdf\"

然后我从响应中创建一个 blob url：

var url = URL.createObjectURL(blob);

有什么方法可以触发跨浏览器工作的这个 blob 的文件下载？我希望标准文件下载就像用户点击了 <a href="/file.pdf"></a> 之类的链接一样发生。

我试过了：

使用 url 作为脚本标签的 SRC 并获取 blob，但无法下载
将其用作 iFrame 的 url
使用它作为对象和嵌入标签的数据url，但它显示对象而不是下载它

【问题讨论】：

我认为这解决了你的问题，至少在 Chrome 中：stackoverflow.com/questions/6468517/…
这需要用户点击第二个链接并且在 IE 中不起作用，所以不幸的是这并不能解决我的问题。

标签： javascript pdf download

【解决方案1】：

这就是我最终解决问题的方式。我使用生成文档所需的数据创建了一个新表单，将表单的目标设置为我创建的 iframe，然后提交表单。这会导致正确下载文件。然后，我最终使用服务器设置的 cookie 来确定下载何时完成。

var token = "my-form";

var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('target', token);
form.setAttribute('action', "/my_target_url");

var hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', 'data');
hiddenField.setAttribute('value', JSON.stringify(data_to_submit));
form.appendChild(hiddenField);
element.append(form);

var frame = document.createElement('iframe');
frame.setAttribute('id', token);
frame.setAttribute('name', token);
frame.setAttribute('src', '');
frame.setAttribute('style', 'width:0;height:0;border:0px solid #fff;');
element.append(frame);

form.submit();

【讨论】：