如何为按钮设置href属性实现点击打开PDF文件

实现带按钮样式的PDF跳转入口，最简洁的方案是用绑定了按钮样式类的<a>标签完成配置——原生<button>标签没有原生的href跳转能力，直接给button加href是不会生效的，而a标签的href天然支持指定PDF路径，浏览器会自动唤起内置PDF查看器或者触发下载流程。

先附上你提供的项目目录层级参考：

配置操作流程 #

• 先确认目标PDF在项目中的实际存储路径，参考你现有可正常运行的代码规则：路径以/开头代表从项目根目录开始拼接，完整格式为/PDF所在的文件夹路径/带后缀的PDF完整文件名
• 将参考代码中原有href的占位路径，替换为目标PDF的实际可访问路径
• 如需点击后在新标签页打开PDF、不中断当前页面操作，可给a标签追加target="_blank"属性

可直接套用的代码模板 #

保持你现有的btn btn-info按钮样式不变，只需要替换路径和按钮展示文本即可：

<td>
  <a class="btn btn-info" href="/实际PDF目录/目标PDF文件名.pdf" target="_blank">
    按钮展示文本（如对应文件的日期、名称）
  </a>
</td>

常见踩坑排查 #

• 点击后报404：把准备填到href里的PDF路径直接粘贴到浏览器地址栏访问，能正常加载出PDF的路径，填入代码中就不会出现路径错误
• 点击按钮无反应：检查是否错用了原生<button>标签加href的写法，换回绑定了按钮类的a标签即可解决跳转失效问题
• 浏览器直接触发PDF下载而非预览：这是浏览器自身的默认配置，不属于代码问题，可根据业务需求决定是否保留该行为

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