React项目Ant Design Pro框架中关于a标签点击下载的资源路径问题

本文讲述了在React项目中使用Ant Design Pro框架时,遇到a标签下载资源路径问题的解决过程。通过尝试相对路径、绝对路径和引入require,最终发现将下载文件放置在public目录下,配合相对路径可以实现资源下载。这个问题对于前端开发者来说可能简单,但对于后端转向前端的程序员是个学习点。
摘要由CSDN通过智能技术生成
最近在前端项目中遇到了需要点击a进行下载的场景,具体代码如下	
<a href='/downloads/xxx.xls' download>下载</a>

其中a标签中有一个download属性,引用一下w3c的定义

定义和用法 download 属性规定被下载的超链接目标。
在 a 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf,
.txt, .html, 等等)。

大概意思就是加了download属性以后就不是跳转了,变成点击下载了。
遇到的问题是一开始在同级目录下创建downloads文件夹并且加入文件,通过./downloads/xxx.xls的形式访问不到,在父级目录下创建文件夹也访问不到。于是就去看了官方文档,在Ant Design Pro官方的常见问题下面有一条为

如何使用图片等静态资源? 可以直接使用绝对路径(需要图床支持),若需直接使用本地文件,可按以下方式引入。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值