React中如何使用button元素实现文件下载而非anchor标签？

问题说明 #

我想在一个div中放置两个按钮，一个执行其他无关操作，另一个用于下载PDF文件。但目前找到的方案只有使用anchor标签，这破坏了我原本的样式设计，令人困扰。请问在React/HTML中是否可以使用button元素实现文件下载？

现有代码如下：

JSX代码

<div className="aboutMeButtons">
  <button className="button btn-1">Hire Me</button>
  <a href={resume} download className="button">
    Download Resume
  </a>
</div>

CSS代码

.aboutMeButtons {
  margin-top: 50px;
  padding-bottom: 100px;
  text-align: center;
  box-shadow: none;
  
}

.btn-1 {
  margin-right: 30px;
}

.button {
  background-color: #37D4AF;
  border-color: #37D4AF;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  min-width: 220px;
  height: 70px;
  text-decoration: none;
}

解决方案 #

方案一：修复a标签样式，保持原生下载功能

a标签和button样式不一致，核心原因是浏览器默认给button加了border、cursor等属性，而a标签没有。只需给.button类补充几个属性，就能让两者样式完全统一：

修改后的CSS：

.button {
  background-color: #37D4AF;
  border: 1px solid #37D4AF; /* 补上button默认的边框 */
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  min-width: 220px;
  height: 70px;
  text-decoration: none;
  cursor: pointer; /* 鼠标悬停显示手型，和button一致 */
  display: inline-flex; /* 对齐方式和button统一 */
  align-items: center;
  justify-content: center;
}

这种方式无需修改JSX结构，a标签就能和button外观完全一致，同时保留原生下载功能，逻辑最简单。

方案二：用button元素结合JavaScript实现下载

如果你一定要用button标签，可以通过JS触发下载逻辑，以下是两种常见写法：

写法1：借助隐藏的a标签（推荐）

利用a标签的原生下载能力，通过ref触发点击，同时保持button的外观：

import { useRef } from 'react';

function YourComponent() {
  const downloadLinkRef = useRef(null);
  const resumeUrl = '/path/to/your/resume.pdf'; // 替换为你的PDF地址

  const handleDownload = () => {
    // 触发隐藏a标签的点击事件
    downloadLinkRef.current?.click();
  };

  return (
    <div className="aboutMeButtons">
      <button className="button btn-1">Hire Me</button>
      <button className="button" onClick={handleDownload}>
        Download Resume
      </button>
      {/* 隐藏的a标签，用来触发下载 */}
      <a 
        ref={downloadLinkRef} 
        href={resumeUrl} 
        download="resume.pdf" 
        style={{ display: 'none' }} 
      />
    </div>
  );
}

写法2：动态创建Blob和下载链接（适合动态生成的PDF）

如果你的PDF是通过API动态获取的（比如后端返回Blob），可以用这种方式：

function YourComponent() {
  const handleDownload = async () => {
    try {
      // 从API获取PDF文件Blob
      const response = await fetch('/api/get-resume');
      if (!response.ok) throw new Error('下载失败');
      
      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      
      // 创建临时a标签触发下载
      const tempLink = document.createElement('a');
      tempLink.href = downloadUrl;
      tempLink.download = 'resume.pdf'; // 指定下载文件名
      document.body.appendChild(tempLink);
      tempLink.click();
      
      // 清理临时资源
      document.body.removeChild(tempLink);
      URL.revokeObjectURL(downloadUrl);
    } catch (err) {
      console.error(err);
      // 这里可以添加错误提示，比如alert('下载失败，请重试')
    }
  };

  return (
    <div className="aboutMeButtons">
      <button className="button btn-1">Hire Me</button>
      <button className="button" onClick={handleDownload}>
        Download Resume
      </button>
    </div>
  );
}

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