应用背景
前端项目实现下载文件的功能,在后台没给我们撸接口的情况下,我们可以利用a标签实现下载功能,而且贼简单~
实现原理
通过a标签的download的属性,将需要下载的文件放在前端项目中,然后href属性访问文件路径(这里一定要是绝对路径,不然上线到服务器就变长脸啦)!!!!!!
代码示例
拿vue来说,我们的文件需放在静态资源的文件夹,知道你常用assets文件夹放图片啥的,卤煮告诉你,这样行不通!!!!
vue 2.× 的版本,把文件放static文件夹下,vue 3.×以上,放到public文件夹下。
然后嘞,就下载呗~
// 以vue 2.×为例,baseURL就是你项目配置(根据环境配置的路径)
<a :href="`${baseURL}/static/file/模板.xlsx`" download="模板.xlsx">模板下载</a>
难点其实在路径的设置,稍有问题上线后就导致找不到路径,所以各位请慎重!!!!!!