React+Parcel环境下本地PDF下载异常，误下载index.html求助

核心原因 #

本地用Parcel开发时，直接写相对路径（比如./test.pdf）引用静态文件会触发Parcel开发服务器的SPA fallback机制——当服务器找不到对应资源时，会返回index.html，这就是你下载到空HTML文件的原因。CodeSandbox的静态资源处理逻辑不同，所以能正常下载PDF。

解决步骤 #

• 正确引入静态资源：用ES模块方式引入PDF，让Parcel识别并处理这个资源：

  // 在组件文件顶部引入PDF
  import testPdf from './test.pdf';
  

• 修改下载逻辑的路径：把原本的href="./test.pdf"替换为引入的变量：

  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = testPdf; // 使用Parcel处理后的资源路径
    link.download = 'test.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  

• 验证文件位置：确保test.pdf和当前组件文件在同级目录，Parcel会自动把它打包到输出目录，并返回正确的访问URL。

替代方案（用public目录） #

如果把PDF放到项目根目录的public文件夹（需手动创建），可以直接用/test.pdf作为href路径——Parcel会将public下的文件原样复制到打包目录，开发服务器也能直接访问。

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