vue 中从后端获取到文件的 url 地址,前端根据 url 地址下载文件

最新推荐文章于 2025-06-14 09:06:15 发布

YZRHANYU

最新推荐文章于 2025-06-14 09:06:15 发布

阅读量1.2w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/YZRHANYU/article/details/129516729

文章介绍了在Vue项目中，如何利用fetch将后端提供的文件URL转换为blob对象，再通过URL.createObjectURL生成下载链接，最后利用<a>标签实现文件下载。主要涉及fetchAPI，blob对象，以及URL对象的使用，并强调了资源释放的重要性。

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

vue 之从后端获取到文件的 url 地址,前端根据 url 地址文件下载

前言
一、实现思路
二、具体实现
总结

前言

项目用的是 vben admin 框架,用的是 vue3 + TS
项目需求数据导出功能,前端需要实现文件下载功能
后端返回的是文件的 url 地址 (本项目中返回的是阿里云 oss 的文件地址)

一、实现思路

从后端得到的是一个 url 地址,先通过 fetch api 请求这个 url 地址并转换成 blob 对象,通过 URL.createObjectUrl() 将 blob 对象生成 url 地址,绑定到 <a > 标签的 href 属性上面,结合 download 来实现点击 <a > 标签下载文件

二、具体实现

1.完整代码

代码如下：

  function exportData() {
   
   
    let data = getForm().getFieldsValue();
    exportTowerHistoryToExcel({
   
    deviceId, createTime: data.startTime }).then((url) => {
   
   
	    downLoadFile(url);
    });