如何在Remix中实现文本文件下载且不跳转页面？

有几种方案可以实现需求，避免页面跳转，直接触发文件下载：

方案1：修改资源路由的响应头 #

如果文本内容需要从后端生成或读取，调整资源路由的响应头，让浏览器触发下载而非打开新页面：

创建资源路由（比如app/routes/download.txt.tsx），在loader函数中设置Content-Disposition为attachment：

import { LoaderFunction } from "@remix-run/node";

export const loader: LoaderFunction = async () => {
  // 替换为你的文本内容，也可以从数据库/文件读取
  const textContent = "这是用户要下载的文本内容";
  
  return new Response(textContent, {
    headers: {
      "Content-Type": "text/plain",
      // 指定文件名，浏览器会触发下载
      "Content-Disposition": 'attachment; filename="custom-file.txt"',
    },
  });
};

前端用普通按钮或链接触发即可，点击后浏览器直接下载文件，不会跳转当前页面：

export default function MyPage() {
  return (
    <div>
      {/* 用按钮触发，避免默认跳转 */}
      <button onClick={() => window.open("/download.txt", "_blank")}>
        下载文本文件
      </button>
      {/* 或用a标签，加上download属性更保险 */}
      <a href="/download.txt" download="custom-file.txt" target="_blank">
        下载文本文件
      </a>
    </div>
  );
}

方案2：前端直接生成Blob下载 #

如果文本内容在前端生成，无需后端资源路由，直接通过Blob API触发下载：

export default function MyPage() {
  const handleDownload = () => {
    // 替换为你的前端文本内容
    const textContent = "前端生成的文本内容";
    const blob = new Blob([textContent], { type: "text/plain" });
    const downloadUrl = URL.createObjectURL(blob);
    
    // 创建临时a标签触发下载
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = "frontend-file.txt";
    document.body.appendChild(link);
    link.click();
    
    // 清理资源
    document.body.removeChild(link);
    URL.revokeObjectURL(downloadUrl);
  };

  return (
    <div>
      <button onClick={handleDownload}>下载文本文件</button>
    </div>
  );
}

这种方式完全在前端处理，不会发起后端请求，也不会跳转页面。

方案3：Fetch后端内容后处理下载 #

如果需要从后端获取文本内容，但不想通过链接跳转，可以用Fetch API请求资源路由，再处理Blob下载：

export default function MyPage() {
  const handleDownload = async () => {
    try {
      const response = await fetch("/download.txt");
      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "fetched-file.txt";
      document.body.appendChild(link);
      link.click();
      
      document.body.removeChild(link);
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error("下载失败:", error);
    }
  };

  return (
    <div>
      <button onClick={handleDownload}>下载文本文件</button>
    </div>
  );
}

对应的资源路由同方案1，返回带Content-Disposition: attachment的响应即可。

内容的提问来源于stack exchange，提问作者J. Hesters