HTML实现PDF简历下载按钮时提示‘失败-无文件’问题排查

核心问题定位方向 #

报错提示“失败-无文件”，本质是浏览器按a标签的href路径找不到对应的PDF资源，和下载按钮的样式、点击触发逻辑无关，优先从资源路径匹配层面排查：

• 第一步：核对PDF文件的存放位置
  当前代码写的href是/images/cv.pdf，这是指向网站根目录的绝对路径，对照项目目录检查：
  • 如果是使用Vite/Webpack这类构建工具的前端项目，非代码类的静态资源（比如PDF、不需要模块化处理的图片）必须放在项目的public文件夹下。如果误把cv.pdf放在了src/images、src/assets这类源码目录下，构建时这些文件会被打包工具处理成带哈希后缀的静态资源，不会保留/images/cv.pdf的原路径，自然触发404报错。
  • 正确存放方式：在public目录下新建images文件夹，把cv.pdf放进去，构建后就会直接映射到网站根目录的/images/cv.pdf路径。
• 第二步：核对文件名与大小写匹配
  检查实际PDF的文件名是否和href里写的完全一致：比如实际文件是CV.pdf、cv-resume.pdf、cv.PDF，和代码里的cv.pdf不匹配时，服务器会判定文件不存在。
• 第三步：核对项目部署的基础路径
  如果项目没有部署在网站的根目录下（比如部署在https://你的域名/个人站点/这类子路径下），写死的绝对路径/images/cv.pdf会被解析到网站根目录，找不到对应项目下的资源。这种情况可以把href改成相对路径./images/cv.pdf，让浏览器基于当前页面的路径拼接资源地址。

快速验证方法 #

直接把a标签href里的/images/cv.pdf复制到浏览器地址栏，按回车测试：

1. 如果页面显示404，按上面的路径调整规则把PDF放到正确位置、修正文件名即可解决
2. 如果能正常打开PDF，再检查是否是浏览器安全设置拦截了下载流程即可

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