JavaScript中Ajax怎么用responseType指定返回Blob类型来实现图片下载-js教程-PHP中文网

用 ajax 的 responsetype 设为 "blob" 可直接获取图片二进制数据，配合 url.createobjecturl() 和标签触发下载，无需 base64 编码，高效且兼容性好；xmlhttprequest 需在 send 前设 xhr.responsetype = "blob"，fetch 则需调用 response.blob() 提取 blob；生成临时 url 后通过 a.download 触发保存，并建议调用 url.revokeobjecturl() 释放内存。

javascript中ajax怎么用responsetype指定返回blob类型来实现图片下载

用 Ajax 的 responseType 设为 "blob"，就能把服务器返回的图片二进制数据直接拿到，再配合 URL.createObjectURL() 和 <a></a> 标签触发下载，整个过程不经过 base64 编码，效率高、兼容性好。

设置 responseType 为 blob

Ajax 请求发起前必须明确指定 responseType: "blob"，否则默认是字符串，Blob 数据会被错误解析，导致图片损坏或下载失败。

XMLHttpRequest 方式：在 open() 之后、send() 之前设置 xhr.responseType = "blob"
fetch 方式：不需要额外设置，但要注意 response.blob() 才能提取 Blob 对象（fetch 默认响应体是流式，需显式调用方法）

处理响应并生成可下载链接

拿到 Blob 后不能直接用 src="blob:xxx" 显示或跳转，要通过 URL.createObjectURL(blob) 创建临时 URL，再用 <a download="xxx.jpg"></a> 触发保存。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

download 属性指定文件名，浏览器会按此命名保存（注意：部分旧版 Safari 不支持该属性，需降级用 document.execCommand("saveAs")）
使用完后建议调用 URL.revokeObjectURL(url) 释放内存，尤其在频繁下载时避免内存泄漏

完整示例（XMLHttpRequest）

以下是一个兼容性较好、逻辑清晰的下载函数：

function downloadImage(url, filename = "image.png") {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob"; // 关键：必须设为 blob

  xhr.onload = function () {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = objectUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(objectUrl); // 清理
    } else {
      console.error("下载失败，状态码：", xhr.status);
    }
  };

  xhr.onerror = () => console.error("网络请求出错");
  xhr.send();
}