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的网址
将它用作对象和嵌入标记的数据网址，但它显示对象而不是下载对象

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

触发blob响应的Web浏览器下载

1 个答案: