Web文件下载 : 从PDF预览Bug到Hook架构演进

在 Web 开发中，下载功能看似简单，却隐藏着浏览器行为差异与跨域安全限制的陷阱。

今天，我原本只想做一个导出不同文件格式的功能，却遇到了一个bug：生成Word或MD文件时，Chrome浏览器都会正常弹出下载框，但导出PDF文件时却不行------PDF会直接在当前页面预览，看起来明明是要下载PDF，结果却直接进入了预览模式，而且我原本打开的页面还被这个预览页面覆盖了。

一、为什么 PDF 会"不请自来"地预览？

1.浏览器的 MIME 类型策略

浏览器如何处理一个 URL，取决于服务器返回的 MIME 类型（Multipurpose Internet Mail Extensions）。

Word/MD 文件：由于 Chrome 等浏览器没有内置渲染引擎，它会识别为"不可直接读取的内容"，从而触发下载。
PDF 文件 ：现代浏览器均内置了功能强大的 PDF 渲染器。当它接收到 application/pdf 类型时，默认行为是 "当前窗口导航（Navigation）"。

2. 被忽略的 `download` 属性

我们通常尝试通过 <a download> 标签强制下载，但它受到 同源策略（Same-Origin Policy） 的严格限制：

同源请求 ：download 属性正常工作，强制下载。
跨域请求 ：如果资源来自不同的域名/端口，浏览器出于安全考虑会 无视 download 属性，将其降级为一个普通链接，导致 PDF 直接在当前页打开。

二、Blob 对象与 Object URL

为了绕过跨域下载限制并防止原页面丢失，最稳健的方案是利用 Blob (Binary Large Object)。

1. 内存中的"影子文件"

通过 fetch 请求将远程文件拉取到内存中转换为 Blob，我们可以利用 URL.createObjectURL(blob) 生成一个临时的 blob: 协议链接。

MDN 定义 - URL.createObjectURL()：

该方法创建一个 DOMString。该 URL 的生命周期与其创建时的 document 绑定。

2. 为什么 Blob 能解决问题？

伪装同源 ：生成的 blob:// 链接与当前页面拥有相同的 Origin，这使得 download 属性 100% 被浏览器尊重。
生命周期管理 ：虽然 URL 与 DOM 树绑定，但它仅仅是指向内存的指针。通过手动创建 a 标签并设置 target="_blank" 或触发 .click()，我们可以精确控制它是静默下载还是新窗口预览。

三、架构升级：自定义 Hook 的解耦艺术

在复杂的业务逻辑中，我原本将文件获取、Blob 转换、动态创建 DOM 节点等代码堆积在 index.tsx 中会导致维护灾难。

1. 逻辑抽离的必要性

关注点分离：UI 组件只负责"展示"，而下载的繁琐逻辑应该交给专门的逻辑单元。
复用性：自定义 Hook 可以让下载逻辑在全站不同页面间自由导入。

2. 最佳实践代码实现

我们将这一过程封装为 useDownload Hook，实现一处定义，随处调用：

javascript 复制代码

import { useState } from 'react';

/**
 * 自定义下载 Hook
 * 封装了从获取流到触发 DOM 点击的全过程
 */
export const useDownload = () => {
  const [loading, setLoading] = useState(false);

  const handleDownload = async (fileUrl: string, fileName: string) => {
    setLoading(true);
    try {
      // 1. 获取资源并转化为二进制 Blob
      const response = await fetch(fileUrl);
      const blob = await response.blob();

      // 2. 生成内存 URL
      const url = window.URL.createObjectURL(blob);

      // 3. 动态注入 a 标签触发下载
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName; // 此时同源，download 属性生效
      document.body.appendChild(link);
      link.click();

      // 4. 清理现场
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url); // 必须释放内存，防止溢出
    } catch (e) {
      console.error("下载失败", e);
    } finally {
      setLoading(false);
    }
  };

  return { handleDownload, loading };
};