在 XMLHttpRequest POST 之后下载 png 文件

Question

我有一个网站，它以标准 XMLHttpRequest 的形式将数据发送到 java servlet，如下所示

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/GraphingServlet/FC/ExportPng", false);
xmlHttp.send("some_data");

我的 java servlet 收到此请求，以二进制编码创建一个 png 并将此 png 发送回网站，按照以下方式进行操作

response.setContentType("image/png");
response.setHeader("Content-Disposition","attachment; filename=\"picture.png\"");
response.setHeader("Content-Transfer-Encoding", "binary");
ServletOutputStream out = response.getOutputStream();
out.write(byte_array_of_binary_encoded_png);
out.flush();

通过萤火虫我看到我的网页收到了很多信息，但我没有下载弹出窗口。如何让网站在收到 http 响应中编码的 png 时提示用户将此 png 保存为“picture.png”？

感谢您的帮助。

Answer 1

您不能通过 AJAX 下载文件。但是，您可以执行以下操作：

HTML：

<button type="button" onclick="download()">Donwload</button>

<form name="downloadForm" action="/GraphingServlet/FC/ExportPng"
  method="post" target="secretFrame" style="display: none;">
  <input type="hidden" id="param1" name="param1"> 
  <input type="hidden" id="param2" name="param2">
</form>

<iframe name="secretFrame" style="display: none;"></iframe>

JS：

function download() {
  document.getElementById("param1").value = "some_data";
  document.getElementById("param2").value = "some_data";
  document.forms["downloadForm"].submit();
}