React中如何创建PDF下载链接 下载文件空白体积异常如何解决

核心错误原因 #

你当前的错误本质是PDF文件没有被正确打包到构建产物中，你下载到的9kb文件实际是React应用的默认index.html入口文件，修改后缀为PDF后自然无法正常打开。

具体错误点 #

• 存放路径错误：你把PDF放在了React组件所在的源码目录（一般为src目录），常规的React构建工具（CRA、Vite等）不会将src目录下的非源码静态资源自动打包到最终产物中，只有放在专门的静态资源目录的文件才会被正确处理。
• 引用路径错误：直接使用相对路径./Tanzeel_Mirza_Resume.pdf引用静态资源时，构建工具不会做特殊处理，请求该路径时会触发前端路由的fallback规则，返回index.html文件。

修复步骤 #

1. 移动PDF文件到对应静态资源目录：
   • 若使用Create React App搭建项目：将PDF移动到项目根目录的public文件夹下
   • 若使用Vite搭建项目：同样将PDF移动到项目根目录的public文件夹下
2. 修改组件代码，调整引用路径：

   const Footer = (props) => {
       return (
         <a href="/Tanzeel_Mirza_Resume.pdf" download="Tanzeel_Mirza_Resume.pdf">Download</a>
       )
   }
   

   如果你的应用需要部署在域名的子路径下，Create React App项目可以使用以下写法兼容：

   <a href={`${process.env.PUBLIC_URL}/Tanzeel_Mirza_Resume.pdf`} download="Tanzeel_Mirza_Resume.pdf">Download</a>
   

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