Vue项目中a标签下载文件问题及axios解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36332464/article/details/93665734

在Vue本地项目中使用a标签尝试从服务器API下载文件失败，问题在于未发出请求且后台已设置header。为解决此问题，改用axios发起请求，确保返回数据类型为Blob，从而实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己做的本地vue项目中想用a标签进行文件的下载，href中填写的是服务器的API


<div class="file-item" v-for="(item, index) in curTask.files" :key="index">
  <a class="file-name" :href="`/api/task/${curTask.id}/files/${item}`" :download="item">{{item}}</a>
</div>

但是点击之后，显示下载失败，没有发现文件。后台是有设置header的，

response.setHeader("Content-disposition", "attachment;filename="+ file.name);

查看请求也发现没有发出请求，没有查到什么解决方案。

于是只能通过axios请求文件的方式进行解决。

// vue页面中

<a class="file-name" href="javascript:;" @click="download(item)">{{item}}</a>

// dowload 函数
async download(filename: string) {
    const data = await this.$store.dispatch(`task/${LOAD_FILE}`, {
      id: this.currentTask.id,
      filename
    });
    const url = URL.createObjectURL(data);
    const a = document.createElement('a'); // 生成一个a元素
    a.style.display = 'none';
    a.href = url;
    a.setAttribute('download', filename);
    a.click();
  }


// stores请求中

// httpRequestSilence 是项目中对axios接口进行的封装
const { data } = await httpRequestSilence.get<IResponse<Blob> >(
`/tasks/${payload.id}/files/${payload.filename}`, 
{responseType: 'blob'});
if (data) {
    return Promise.resolve(data);
} else {
    return Promise.resolve('no file');
}

请求文件要注意的是需要设置返回的数据的类型为Blob，这样才能拿到文件。