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

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

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

• 前言
• 一、实现思路
• 二、具体实现
• • 1.完整代码
    • 2.代码分析
    • • 2.1 通过 fetch 将 url 地址转换为 blob 对象
        • 2.2 通过 URL.createObjectUrl() 将 blob 对象生成 url 地址
        • 2.3 创建 <a> 标签元素,将该元素放到页面当中,并通过点击事件来实现下载功能
• 总结

---

前言

项目用的是 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);
    });
  }
	function downLoadFile (url){
      let fileName = url.slice(url.lastIndexOf('/') + 1); // 这里是通过从后端获取到的 url 地址中截出来原本的文件名
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
	}
	

2.代码分析

2.1 通过 fetch 将 url 地址转换为 blob 对象

以下图片来自w3cschool文档 fetch_api

分析

res.blob() 的返回值是什么
从文档中我们知道res.blob() 返回的并不是一个 blob 对象,而是一个 Promise,继续 .then 获取到的才是 blob 对象

res.blob() 到底做了什么
每调用一次 res.blob() 都会执行 consume budy 的动作

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-m5eF2Cp7-1715826648003)]