前端文件下载这个功能再普遍不过,不过这个这里面的相关问题蛮多的。
在我们业务中一般会遇到两种情况,一种就是下载文件需要验证不需要的验证的
先说不用验证的
不用的验证的一般的做法就是用a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root">
<a href="https://example.map4" download>下载</a>
</div>
</body>
</html>
但是这个是有前提的,那就是下载的连接要和页面是同源的
再说要验证的
很多场景下 我们都希望下载文件要验证,网上很多的做法都是请求获取文件数据 再将数据封装成文件,再创建a标签,模拟点击后下载。
我想说的是这两种方式差别挺大的
直接使用a标签下载
文件数据是通过浏览器直接到的,浏览器不用存储文件数据
而通过获取数据创建a标签下载的则会是
浏览器会先接受所有数据,然后再把数据下载到本地
说说这两种的区别吧,主要就是他们的数据流向方式的区别。在用户体验上,第一种方式,你可以在浏览器下载中看到实时的下载进度条。而第二种则基本看不到,因为第二种是把文件数据下载浏览器,然后本地请求浏览器将文件下载来的 浏览器和计算机都是在本地 数据传输非常快,所以基本看不到进度条。
那有人就说了 怎么感觉第二种更好 没有进度条 一下子就下载好了。对于小文件的话 基本没差别,对于大文件来说的话,第二种就用户会发现 怎么点了下载半天没反应呢 然后疯狂的点点,或者网速慢也会导致着这种情况。而第一种则不会 点击之后会立即下载 用户也能实时看到进度。