Rails中Axlsx与Ajax结合实现Excel下载Spinner的无新标签页控制

我来帮你解决这个问题！首先得明确一个关键点：浏览器没法直接监听「Excel文件打开」这个事件，因为打开本地程序是系统级操作，前端拿不到这个状态。不过我们可以退而求其次，在服务器返回Excel文件、浏览器开始下载后就隐藏加载图标，这已经能满足用户对「加载完成」的感知了（如果用户设置了自动打开下载的文件，此时Excel会自动启动）。

下面是具体的实现方案，完全不需要新标签页或iframe：

1. 前端JS：用Fetch API处理请求，控制加载图标 #

首先，给你的下载按钮和加载图标加上ID，比如：

<button id="excel-download-btn">下载Excel</button>
<div id="loading-spinner" style="display: none;">正在生成Excel...</div>

然后写对应的JS逻辑，点击按钮时显示spinner，用Fetch请求获取Excel文件，处理下载后隐藏spinner：

document.getElementById('excel-download-btn').addEventListener('click', async function() {
  const spinner = document.getElementById('loading-spinner');
  spinner.style.display = 'block'; // 显示加载图标

  try {
    // 发送请求到你的Rails控制器action
    const response = await fetch('/your/controller/download_excel', {
      method: 'GET',
      headers: {
        'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }
    });

    if (!response.ok) {
      throw new Error('生成Excel失败');
    }

    // 把响应转为Blob对象
    const blob = await response.blob();
    // 创建临时下载链接
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = downloadUrl;
    link.download = 'your_file_name.xlsx'; // 设置下载的文件名
    document.body.appendChild(link);
    link.click(); // 触发下载

    // 清理临时资源
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  } catch (error) {
    console.error('下载出错:', error);
    // 这里可以加用户提示，比如alert('下载失败，请重试')
  } finally {
    // 无论成功失败，都隐藏加载图标
    spinner.style.display = 'none';
  }
});

2. Rails控制器：返回Excel文件 #

你的axlsx生成逻辑保持不变，用send_data返回文件即可：

def download_excel
  # 你的axlsx生成代码示例
  xlsx_package = Axlsx::Package.new
  workbook = xlsx_package.workbook
  
  workbook.add_worksheet(name: '数据报表') do |sheet|
    sheet.add_row ['姓名', '部门', '业绩']
    # 这里添加你的数据行...
  end

  # 发送Excel文件
  send_data xlsx_package.to_stream.read,
            filename: '业绩报表.xlsx',
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            disposition: 'attachment'
end

为什么这个方案可行？ #

• 用Fetch API替代传统的Ajax或直接链接，能让我们监听请求的完整生命周期，从而精准控制加载图标的显示/隐藏。
• 通过Blob对象创建临时下载链接，不会打开新标签页，完全在当前页面触发下载行为。
• 不需要iframe，代码简洁且符合现代前端最佳实践。

关于「Excel打开后隐藏图标」的补充 #

如开头所说，前端无法捕获Excel打开的事件，因为这是本地系统的操作。不过用户设置了自动打开下载文件的话，在浏览器开始下载后很快就会启动Excel，这个时间差用户几乎感知不到，所以用「请求完成后隐藏图标」的方案完全可以接受。

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