下载文件 - 前端实现文件下载

2023-10-18 14:34:24

前言

在前端开发中，我们经常会遇到需要下载文件的情况。例如，用户需要下载报告、图片、视频等文件，或者需要将数据导出为CSV或Excel格式。为了满足这些需求，我们需要掌握前端实现文件下载的方法。

直接通过文件地址下载

如果后台返回的是文件地址，我们可以直接通过window.open方法预览并下载文件到本地。具体步骤如下：

获取文件地址。我们可以通过后台接口获取文件地址，也可以通过HTML元素的href属性获取。
创建一个新的窗口。我们可以使用window.open()方法创建一个新的窗口。
将文件地址加载到新窗口中。我们可以使用window.location.href属性将文件地址加载到新窗口中。
关闭新窗口。当文件下载完成后，我们可以使用window.close()方法关闭新窗口。

// 获取文件地址
const fileUrl = 'https://example.com/file.pdf';

// 创建一个新的窗口
const newWindow = window.open();

// 将文件地址加载到新窗口中
newWindow.location.href = fileUrl;

// 关闭新窗口
newWindow.close();

通过文件流下载

如果后台返回的是文件流的格式，我们可以通过以下步骤下载文件：

获取文件流。我们可以通过XMLHttpRequest或fetch API获取文件流。
创建一个Blob对象。我们可以使用Blob()构造函数创建一个Blob对象。
创建一个URL对象。我们可以使用URL.createObjectURL()方法创建一个URL对象。
创建一个a标签。我们可以创建一个a标签并设置其href属性为URL对象。
点击a标签。当用户点击a标签时，文件将开始下载。

// 获取文件流
const fileStream = await fetch('https://example.com/file.pdf');

// 创建一个Blob对象
const blob = new Blob([fileStream]);

// 创建一个URL对象
const url = URL.createObjectURL(blob);

// 创建一个a标签
const a = document.createElement('a');
a.href = url;
a.download = 'file.pdf';

// 点击a标签
a.click();

// 移除URL对象
URL.revokeObjectURL(url);