一文读懂前端文件下载的秘密

2024-01-06 05:00:28

一、下载原理

前端文件下载的原理是利用浏览器提供的方法，通过 HTTP 协议发送请求到服务器，服务器响应时携带要下载的文件，浏览器接收到响应后将文件保存到本地计算机。

二、下载方式

直接下载

直接下载是最简单的方式，即通过标签的 href 属性指定要下载的文件地址，当用户点击标签时，浏览器会自动下载文件。

<a href="文件地址" download>文件名称</a>

AJAX 下载

AJAX 下载是通过 JavaScript 发起 HTTP 请求，服务器响应时携带要下载的文件，浏览器接收到响应后将文件保存到本地计算机。

fetch("文件地址").then(response => {
  response.blob().then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "文件名称";
    a.click();
    URL.revokeObjectURL(url);
  });
});

三、常见场景

单文件下载

单文件下载是最常见的情况，可以直接下载或通过 AJAX 下载实现。

多文件下载

多文件下载是指同时下载多个文件，可以使用多个标签或 AJAX 请求来实现。

<a href="文件地址1" download>文件名称1</a>
<a href="文件地址2" download>文件名称2</a>

const urls = ["文件地址1", "文件地址2"];
const promises = urls.map(url => {
  return fetch(url).then(response => {
    return response.blob();
  });
});

Promise.all(promises).then(blobs => {
  blobs.forEach((blob, index) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `文件名称${index + 1}`;
    a.click();
    URL.revokeObjectURL(url);
  });
});

跨域文件下载

跨域文件下载是指下载的文件位于与当前页面不同的域下，此时需要使用 CORS 来实现。

const xhr = new XMLHttpRequest();
xhr.open("GET", "文件地址", true);
xhr.withCredentials = true;
xhr.responseType = "blob";

xhr.onload = function() {
  if (this.status === 200) {
    const blob = this.response;
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "文件名称";
    a.click();
    URL.revokeObjectURL(url);
  }
};

xhr.send();