用 Ajax 的 responseType 设为 "blob" 可直接获取图片二进制数据，配合 URL.createObjectURL() 和 <a> 标签触发下载，无需 base64 编码，高效且兼容性好；XMLHttpRequest 需在 send 前设 xhr.responseType = "blob"，fetch 则需调用 response.blob() 提取 Blob；生成临时 URL 后通过 a.download 触发保存，并建议调用 URL.revokeObjectURL() 释放内存。
用 Ajax 的 responseType 设为 "blob"，就能把服务器返回的图片二进制数据直接拿到，再配合 URL.createObjectURL() 和 <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"> 触发保存。
-
download属性指定文件名，浏览器会按此命名保存（注意：部分旧版 Safari 不支持该属性，需降级用document.execCommand("saveAs")） - 使用完后建议调用
URL.revokeObjectURL(url)释放内存，尤其在频繁下载时避免内存泄漏
完整示例（XMLHttpRequest）
以下是一个兼容性较好、逻辑清晰的下载函数：
立即学习“Java免费学习笔记（深入）”；
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();
}
fetch 版本注意事项
fetch 更简洁，但要注意 Promise 链和错误处理：
-
response.ok判断 HTTP 状态是否成功（200–299），比只看status === 200更稳妥 -
response.blob()返回 Promise，需 await 或 .then 处理 - 若后端返回的是重定向（如 302），fetch 默认跟随，但某些场景需手动处理 Location 头，此时用 XMLHttpRequest 更可控
