触发Web浏览器下载Blob响应

Question

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

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

然后，我从响应中创建一个Blob网址：

var url = URL.createObjectURL(blob);

有什么方法可以触发可跨浏览器运行的Blob文件下载吗？ 我希望进行标准文件下载，就像用户单击了<a href="/file.pdf"></a>类的链接一样。

我试过了：

• 使用url作为脚本标签的SRC，它会获得Blob，但没有下载
• 使用它作为iFrame的网址
• 使用它作为对象和嵌入标签的数据URL，但是它显示对象而不是下载它

Answer 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();