React实现类Express sendFile文件返回及Express用户离页监听方案

这个需求的核心是控制浏览器对资源的处理行为，依赖Content-Disposition响应头配置+前端适配逻辑实现，具体步骤如下：

• 第一步：后端返回资源时按文件类型配置对应响应头
  • 对exe、压缩包等需要强制下载的格式，设置响应头Content-Disposition: attachment; filename="自定义文件名.后缀"
  • 对PDF、图片、文本等需要预览的格式，设置响应头Content-Disposition: inline; filename="自定义文件名.后缀"，同时需要配置正确的Content-Type，比如PDF对应application/pdf、PNG图片对应image/png
• 第二步：React端按请求方式适配处理逻辑
  • 如果用a标签跳转获取资源：直接把资源地址赋值给a标签href属性即可，浏览器会自动根据响应头判断是下载还是预览

    {/* 示例代码 */}
    <a href="/api/files/test.exe" target="_blank">下载EXE文件</a>
    <a href="/api/files/test.pdf" target="_blank">预览PDF文件</a>
    

  • 如果用fetch/axios等异步请求拉取资源：需要手动解析响应头判断处理逻辑

    const fetchFile = async (fileId) => {
      const res = await fetch(`/api/files/${fileId}`);
      const blob = await res.blob();
      // 提取响应头配置
      const disposition = res.headers.get('Content-Disposition');
      const fileName = disposition?.match(/filename="?([^"]+)"?/)?.[1] || '未命名文件';
      
      if (disposition?.includes('attachment')) {
        // 强制下载逻辑
        const blobUrl = URL.createObjectURL(blob);
        const aTag = document.createElement('a');
        aTag.href = blobUrl;
        aTag.download = fileName;
        aTag.click();
        URL.revokeObjectURL(blobUrl);
      } else {
        // 预览逻辑
        const blobUrl = URL.createObjectURL(blob);
        window.open(blobUrl, '_blank');
      }
    }
    

注意：如果是跨域请求，后端需要配置Access-Control-Expose-Headers: Content-Disposition，否则前端无法读取到该响应头的值。

首先需要明确：React的unload属于前端浏览器侧的事件，Express是后端服务，没有原生能力或第三方库可以直接监听用户的页面离开行为，只能通过前后端配合实现：

• 方案1：前端监听页面卸载事件上报，Express侧写接口接收数据
  React前端可以监听beforeunload事件，用navigator.sendBeacon发送上报请求（该API可以保证页面卸载时请求也能正常发出，不会被浏览器中断）

  useEffect(() => {
    const reportLeave = () => {
      navigator.sendBeacon('/api/leave-report', JSON.stringify({
        userId: '当前用户ID',
        page: location.pathname
      }));
    };
    window.addEventListener('beforeunload', reportLeave);
    return () => window.removeEventListener('beforeunload', reportLeave);
  }, []);
  

• 方案2：如果需要判断用户的在线状态，可以搭配WebSocket心跳检测，后端超过指定时长没有收到前端心跳包时判定用户已离开。

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