聊聊前端文件下载

84 阅读2分钟

前端文件下载这个功能再普遍不过,不过这个这里面的相关问题蛮多的。

在我们业务中一般会遇到两种情况,一种就是下载文件需要验证不需要的验证的

先说不用验证的

不用的验证的一般的做法就是用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标签下载

image.png

文件数据是通过浏览器直接到的,浏览器不用存储文件数据

而通过获取数据创建a标签下载的则会是

image.png

浏览器会先接受所有数据,然后再把数据下载到本地

说说这两种的区别吧,主要就是他们的数据流向方式的区别。在用户体验上,第一种方式,你可以在浏览器下载中看到实时的下载进度条。而第二种则基本看不到,因为第二种是把文件数据下载浏览器,然后本地请求浏览器将文件下载来的 浏览器和计算机都是在本地 数据传输非常快,所以基本看不到进度条。

那有人就说了 怎么感觉第二种更好 没有进度条 一下子就下载好了。对于小文件的话 基本没差别,对于大文件来说的话,第二种就用户会发现 怎么点了下载半天没反应呢 然后疯狂的点点,或者网速慢也会导致着这种情况。而第一种则不会 点击之后会立即下载 用户也能实时看到进度。

那又有人就说了 我遇到文件下载的时候要验证才行啊:一般使用第二种方式的都是因为请求可以携带token。除了token验证还可以用什么验证?那就是cookie,请求都会携带cookie包括a标签 img标签等资源标签都会携带cookie

所以尽量别用第二种方式去下载文件,主要就是用户体验非常不好。还有一点,就是第二种方式下载的文件会导致浏览器的内存飙升的,如果使用记得下载后清除blob。要是后端、产品让你这么做 直接把这篇文章甩到他脸上