如何在前端提供实现下载文件

在前端提供实现下载文件的方法是将文件放在public文件夹中,然后通过拼接URL来触发下载。可以给按钮绑定一个onClick方法,使用JavaScript创建一个<a>标签,设置href为文件的URL,download为文件名,然后将<a>标签添加到页面中并点击,完成下载操作。
有这样一个需求,我所使用的框架是react,需要给用户一个模板excel进行参考,因为就这一个文件要下载,所有就不放在后端,直接放在前端这边进行下载了。
假设这个文件的名称叫做template.xlsx
具体的做法是:
  1. 把excel文件放到public文件夹中
  1. 这样就可以拿到下载链接了 , /template.xlsx 。
需要注意的是如果你的部署路径不是/,而是类似于/webapp 这样的,你需要在前面加上它。也就是变成`/webapp/template.xlsx 这样部署的时候,下载路径才是正确的。 3. 给button绑定onClick方法,这样点击的时候触发下载。用下面的写法,然后把url传进来就可以了。
也可以直接用这个npm pkg,封装了下载方法[[file-downloader]]
上一篇
file-downloader
下一篇
ant design pro i18n-remove报错