轻松实现前端文件下载，多种方式随心选择！

2023-03-31 10:52:24

下载文件：三种简单方法

在现代网络世界中，下载文件变得越来越普遍。从重要的工作文档到令人振奋的电影和音乐，我们不断地从互联网上获取信息。虽然有许多工具和技术可以帮助我们完成这项任务，但让我们重点介绍三种最简单、最有效的方法：使用 a 标签、使用 GET 接口和使用 Blob 类型。

使用 a 标签

想象一下，你想从你最喜欢的网站上下载一个文件，只需单击一下即可。这就是 a 标签的用武之地。它提供了一种简单的方法，只需创建 a 标签并将 href 属性设置为要下载的文件的 URL 即可。当用户点击该 a 标签时，浏览器将自动下载该文件。

使用 GET 接口

如果你需要更多控制下载的文件名和类型，那么使用 GET 接口可能是你的最佳选择。通过 GET 接口，你可以获取文件的数据，然后使用 blob 类型创建下载链接。

使用 Blob 类型

Blob 类型是一种二进制数据类型，可用于存储各种文件数据。你可以使用 blob 类型创建下载链接，当用户单击该下载链接时，浏览器将自动下载该文件。

注意事项

确保文件位于公共目录中，否则打包后路径会报错，导致下载失败。
调用后端 GET 接口时，使用 blob 类型。前端通常通过创建 a 标签来下载文件。
后端传输文件时，需要调用 GET 接口。

代码示例

使用 a 标签下载文件

<a href="https://example.com/file.zip" download="file.zip">下载文件</a>

使用 GET 接口下载文件

const url = 'https://example.com/file.zip';
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'blob';
request.onload = function() {
  const blob = request.response;
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'file.zip';
  a.click();
};
request.send();

使用 Blob 类型下载文件

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();