Rails中用send_data实现文件下载并完成后更新UI的最优方案

嘿，我来给你梳理一个最贴合Rails风格的解决方案，完美解决你遇到的下载+UI更新的问题～

我们可以跳出“后端直接返回文件流”的固定思维，转而利用AWS S3的预签名URL让用户直接从S3下载文件，同时后端异步处理状态更新，再通过Rails原生的前端生态（Turbo/UJS）完成UI刷新。这样既避开了send_data的多渲染冲突，又解决了CORS问题，还完全符合Rails的约定式开发风格。

步骤1：重构后端下载接口，生成预签名URL并更新状态 #

不再用send_data返回文件流，而是生成S3预签名URL（安全、短期有效），同时更新Foo模型的下载状态，最后返回JSON/JS给前端：

def download
  attachment = Attachment.find_by_id(params[:attachment_id])
  # 生成S3预签名URL，有效期设为10分钟（可按需调整）
  # Rails 7+用service_url，旧版本用expiring_url
  presigned_url = attachment.file.service_url(
    expires_in: 600,
    disposition: "attachment" # 强制浏览器触发下载而非预览
  )

  # 更新Foo模型的下载状态（假设Attachment和Foo是关联关系）
  attachment.foo.update!(downloaded: true)

  # 根据请求类型返回对应内容：AJAX请求返回JSON/JS，普通请求直接重定向
  if request.xhr?
    render json: { url: presigned_url, filename: "#{attachment.title}.#{attachment.file.file.extension}" }
  else
    redirect_to presigned_url
  end
end

小提示：记得给S3桶配置正确的CORS规则，允许你的前端域名发起GET请求，避免跨域问题：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://你的前端域名.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

步骤2：用Rails原生前端工具实现下载+UI更新 #

根据你的Rails版本，选择对应的方案：

方案A：Rails 7+ 用Turbo（推荐） #

Turbo是Rails 7默认的前端框架，能让你用最少的JS完成页面更新：

1. 编写Stimulus控制器（app/javascript/controllers/download_controller.js）：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { path: String, filename: String }

  download(event) {
    event.preventDefault();
    
    // 调用后端接口获取预签名URL
    fetch(this.pathValue, { headers: { "Accept": "application/json" } })
      .then(res => res.json())
      .then(data => {
        // 触发文件下载
        const link = document.createElement('a');
        link.href = data.url;
        link.download = data.filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 用Turbo刷新进度步进器所在的区域（无需整页刷新）
        Turbo.visit(window.location.href, { action: "replace" });
        // 更优雅的方式：只刷新进度部分的partial
        // fetch("/foos/#{attachment.foo.id}/progress", { headers: { "Accept": "text/vnd.turbo-stream.html" } })
        //   .then(res => res.text())
        //   .then(html => Turbo.renderStreamMessage(html));
      })
      .catch(err => console.error("下载失败:", err));
  }
}

2. 在ERB视图中绑定控制器：

<%= button_tag "下载PDF", 
  data: { 
    controller: "download",
    action: "download#click",
    download_path_value: download_attachment_path(attachment.id),
    download_filename_value: "#{attachment.title}.#{attachment.file.file.extension}"
  },
  class: "btn btn-primary" %>

<!-- 进度步进器的容器 -->
<div id="progress-step">
  <%= render partial: "progress_step", locals: { foo: attachment.foo } %>
</div>

方案B：旧版本Rails 用UJS #

如果你的项目还在使用Rails UJS，可以让后端直接返回JS代码来触发下载和UI更新：

1. 修改后端download方法：

def download
  attachment = Attachment.find_by_id(params[:attachment_id])
  presigned_url = attachment.file.service_url(expires_in: 600, disposition: "attachment")
  attachment.foo.update!(downloaded: true)

  if request.xhr?
    # 返回JS代码，直接在前端执行
    render js: <<~JS
      // 触发文件下载
      const link = document.createElement('a');
      link.href = "#{presigned_url}";
      link.download = "#{attachment.title}.#{attachment.file.file.extension}";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      // 更新进度步进器DOM
      document.getElementById('progress-step').innerHTML = "#{j render partial: 'progress_step', locals: { foo: attachment.foo }}";
    JS
  else
    redirect_to presigned_url
  end
end

2. 在视图中添加带remote: true的下载按钮：

<%= link_to "下载PDF", 
  download_attachment_path(attachment.id),
  remote: true,
  id: "download",
  class: "btn btn-primary" %>

<div id="progress-step">
  <%= render partial: "progress_step", locals: { foo: attachment.foo } %>
</div>

为什么这是符合Rails风格的方案？ #

• 关注点分离：后端负责业务逻辑（状态更新、安全链接生成），前端负责交互逻辑（下载触发、UI更新），完全遵循MVC原则；
• 利用Rails原生生态：无论是Turbo还是UJS，都是Rails官方推荐的工具，避免手写复杂的原生AJAX，保持代码一致性；
• 性能优化：让S3直接提供文件下载，减轻服务器负载，同时预签名URL保证了下载的安全性；
• 数据一致性：状态更新在后端完成，不会因为前端异常导致状态不更新。

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