Vue项目中HTML按钮点击下载PDF为空的问题求助

问题根源 #

1. 路径错误：你写的href="src/Files/src/Files/Garri_Potter_i_Taynaya_Komnata.pdf"存在重复嵌套的路径，实际项目里PDF的位置是src/Files/Garri_Potter_i_Taynaya_Komnata.pdf，但这不是核心问题——Vue项目中src目录下的文件属于源码，默认不会被构建工具暴露为可直接访问的静态资源，直接用相对路径访问会找不到文件，最终导致下载空文件或无法打开。

正确解决方案 #

方案1：将PDF移至public目录（推荐） #

Vue项目的public目录是专门存放无需Webpack处理的静态资源的，放在这里的文件可以直接通过根路径访问：

1. 在项目根目录创建public/Files文件夹，把Garri_Potter_i_Taynaya_Komnata.pdf移进去。
2. 修改a标签的href：

<a href="/Files/Garri_Potter_i_Taynaya_Komnata.pdf" download><button class="readBtn">Скачать</button></a>

修复后，不管是下载还是移除download属性直接打开，都能正常工作。

方案2：通过import引入PDF文件 #

如果不想移动文件到public，可以在Vue组件中通过import引入PDF，再绑定到href上：

1. 在组件的script部分引入PDF：

import pdfFile from '../Files/Garri_Potter_i_Taynaya_Komnata.pdf'

2. 在template中绑定动态href：

<a :href="pdfFile" download><button class="readBtn">Скачать</button></a>

Webpack会自动处理这个文件，构建后生成正确的资源访问路径。

额外注意点 #

• 移除download属性后无法打开，本质也是路径错误导致浏览器找不到文件，用上述两种方案修复路径后即可正常在浏览器打开PDF。
• 如果后续要通过v-for循环动态绑定不同PDF的路径，记得对应调整路径配置，确保每个book的PDF路径正确。

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