下载文件，手到擒来！

2024-02-09 04:21:09

认识blob流

在开始具体操作之前，先来了解下blob流。blob流是一种特殊的二进制数据流，它可以表示各种各样的数据，如图像、视频、音频等。blob流不是存储在硬盘上，而是存储在内存中，因此读取和写入blob流的速度非常快。

获取文件blob流地址

我们想要下载一个文件，就需要先获取到文件的blob流地址。blob流地址可以通过两种方式获取：

使用FileReader读取文件

const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.onload = function () {
  const blob = new Blob([reader.result], { type: file.type });
  const blobUrl = URL.createObjectURL(blob);

  // 使用blobUrl来下载文件
};

reader.readAsArrayBuffer(file);

使用XMLHttpRequest发送请求

const xhr = new XMLHttpRequest();

xhr.open('GET', 'file.bin', true);
xhr.responseType = 'blob';

xhr.onload = function () {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const blobUrl = URL.createObjectURL(blob);

    // 使用blobUrl来下载文件
  }
};

xhr.send();

处理blob流

获取到blob流地址后，就可以使用它来下载文件了。有以下两种方法可以处理blob流：

使用window.open()打开一个新窗口并下载文件

window.open(blobUrl);

使用HTML5的<a>标签下载文件

<a href="blobUrl" download="filename.ext">下载</a>

实现下载功能

现在我们已经了解了如何获取和处理blob流，就可以实现下载功能了。

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', function () {
  const file = fileInput.files[0];

  const reader = new FileReader();

  reader.onload = function () {
    const blob = new Blob([reader.result], { type: file.type });
    const blobUrl = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = file.name;
    a.click();

    // 销毁blobUrl
    URL.revokeObjectURL(blobUrl);
  };

  reader.readAsArrayBuffer(file);
});