应用背景
前端项目实现下载文件的功能,在后台没给我们撸接口的情况下,我们可以利用a标签实现下载功能,而且贼简单~

实现原理

通过a标签的download的属性,将需要下载的文件放在前端项目中,然后href属性访问文件路径(这里一定要是绝对路径,不然上线到服务器就变长脸啦)!!!!!!

代码示例

拿vue来说,我们的文件需放在静态资源的文件夹,知道你常用assets文件夹放图片啥的,卤煮告诉你,这样行不通!!!!
vue 2.× 的版本,把文件放static文件夹下,vue 3.×以上,放到public文件夹下。

看图说话
然后嘞,就下载呗~

// 以vue 2.×为例,baseURL就是你项目配置(根据环境配置的路径)
<a :href="`${baseURL}/static/file/模板.xlsx`" download="模板.xlsx">模板下载</a>

难点其实在路径的设置,稍有问题上线后就导致找不到路径,所以各位请慎重!!!!!!

Logo

前往低代码交流专区

更多推荐