如何在React中实现图片下载？解决点击后页面跳转问题

你的问题核心是跨域资源的限制：当目标文件来自不同域名时，浏览器的同源策略会阻止download属性直接生效，此时浏览器会默认打开资源而非触发下载。

下面是无需第三方库的解决方案，通过将远程资源转为Blob对象实现强制下载：

改进后的代码 #

const File = ({ href }) => {
  const onDownload = async () => {
    try {
      // 1. 获取远程资源为Blob对象
      const response = await fetch(href);
      if (!response.ok) throw new Error('资源请求失败');
      const blob = await response.blob();

      // 2. 创建Blob URL
      const blobUrl = URL.createObjectURL(blob);

      // 3. 创建a标签触发下载
      const link = document.createElement('a');
      link.href = blobUrl;
      // 从URL提取原文件名（可选，也可自定义）
      const fileName = href.split('/').pop() || 'downloaded-file';
      link.download = fileName;
      link.click();

      // 4. 释放Blob URL，避免内存泄漏
      URL.revokeObjectURL(blobUrl);
    } catch (err) {
      console.error('下载失败:', err);
      alert('文件下载失败，请检查资源链接');
    }
  };

  return (
    <button onClick={onDownload}>
      download
    </button>
  );
};

const Downloader = () => {
  const files = [
    'https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg',
    'https://image.shutterstock.com/image-photo/example-word-written-on-wooden-260nw-1765482248.jpg',
  ];

  return (<div>{files.map(f => <File href={f} key={f} />)}</div>);
};

export default Downloader;

关键说明 #

• Blob转换逻辑：通过fetch获取资源并转为Blob，绕开跨域对download属性的限制
• 自动提取文件名：从URL路径中截取最后一段作为文件名，比固定名称更友好
• 内存管理：使用URL.revokeObjectURL释放临时Blob URL，防止内存泄漏
• 错误处理：添加请求失败的捕获和提示，提升用户体验

注意事项 #

该方案要求目标资源所在服务器支持CORS（即响应头包含Access-Control-Allow-Origin），否则fetch会因跨域报错。如果服务器不支持CORS，前端层面无法直接解决，需要后端配合配置跨域允许或提供代理接口。

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