不使用Axios如何下载并重命名图片文件？

你之前用FileSaver没生效，是因为URL里的disposition=attachment让服务器返回的响应头强制了默认文件名，覆盖了你设置的自定义名称。下面给两个不用Axios的实现方案：

方案1：原生Fetch API（通用方案） #

逻辑和你用Axios的思路一致，换成原生fetch即可：

const downloadImage = async (imageUrl) => {
  try {
    const response = await fetch(imageUrl, {
      headers: {
        "Content-Type": "application/octet-stream"
      }
    });
    if (!response.ok) throw new Error('请求失败，状态码：' + response.status);
    const blob = await response.blob();
    const tempUrl = window.URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = tempUrl;
    link.download = 'name'; // 填写自定义文件名
    link.click();
    
    // 释放临时URL，避免内存泄漏
    window.URL.revokeObjectURL(tempUrl);
  } catch (err) {
    console.error('下载出错:', err);
  }
};

方案2：Image转Blob（仅针对图片资源） #

如果确定是图片文件，可以用Image对象加载后转成Blob，适合不需要额外请求头的场景：

const downloadImage = (imageUrl) => {
  const img = new Image();
  // 跨域图片必须添加该配置，否则无法转换Blob
  img.crossOrigin = 'anonymous';
  
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    
    // 转换为Blob，第二个参数可修改为image/jpeg等格式
    canvas.toBlob((blob) => {
      const tempUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = tempUrl;
      link.download = 'name';
      link.click();
      window.URL.revokeObjectURL(tempUrl);
    }, 'image/png');
  };
  
  img.onerror = (err) => {
    console.error('图片加载失败:', err);
  };
  
  img.src = imageUrl;
};

注意：如果图片是跨域资源，需要目标服务器配置CORS允许你的域名访问，否则该方案会执行失败。

内容的提问来源于stack exchange，提问作者vco