try {
// 调用下载接口,获取 Excel 文件的二进制数据
const response = await downLoad({
fileName: file.value
});
// 检查响应数据
if (response) {
const blob = new Blob([response], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
// 创建一个下载链接
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', record.fileName || 'download.xlsx'); // 默认文件名
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放 Blob URL
window.URL.revokeObjectURL(url);
} else {
console.error('下载数据无效');
}
} catch (error) {
console.error('下载失败:', error);
}
};
- 首先 先拿到需要下载文件的二进制数据
- 下面这段代码的解释
const blob = new Blob([response], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
什么是 Blob
?
Blob
(Binary Large Object,二进制大对象)是一个表示不可变的、原始数据的文件对象。Blob
对象用于在 Web 应用程序中处理和操作二进制数据,例如文件或数据流。
Blob
构造函数的参数
Blob
构造函数接受两个参数:
- 数据数组:
[response]
-
- 这是一个包含要放入
Blob
的数据的数组。在这个例子中,response
是数据源,它可以是ArrayBuffer
、Uint8Array
、字符串或其他类型的二进制数据。 - 数组允许你包含多个部分,但在这里你只有一个部分 (
response
)。
- 这是一个包含要放入
- 选项对象:
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
-
- 这是一个对象,指定了
Blob
的选项。最常见的选项是type
,它指示数据的 MIME 类型。
- 这是一个对象,指定了
MIME 类型
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-
type
属性指定了数据的 MIME 类型。在这个例子中,它设置为'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
。- 这个 MIME 类型对应于 OpenXML 格式的 Excel 文件,这种格式用于 Microsoft Excel 的电子表格(例如
.xlsx
文件)。
- 对以下这段代码的解释
// 创建一个下载链接
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', record.fileName || 'download.xlsx'); // 默认文件名
window.URL.createObjectURL(blob)
window.URL.createObjectURL()
: 这是一个浏览器提供的 API,用于创建一个表示Blob
或File
对象的 URL。blob
: 这是你之前创建的Blob
对象,其中包含你要下载的数据。- 返回值: 这个方法返回一个表示
Blob
的 URL,你可以将它用作下载链接的href
属性。
const link = document.createElement('a');
document.createElement('a')
: 创建一个新的<a>
(链接)元素。这个链接元素将用于触发文件下载。
link.href = url;
link.href
: 将链接的href
属性设置为前面创建的Blob
URL。这指定了点击链接时要下载的文件。
link.setAttribute('download', record.fileName || 'download.xlsx');
link.setAttribute('download', filename)
: 设置download
属性,这会提示浏览器将链接指向的资源作为文件下载,而不是在新标签页中打开。属性值是文件的默认名称。record.fileName || 'download.xlsx'
: 这是一个表达式,用于设置下载文件的名称。record.fileName
是一个可选的变量,表示文件的名称。如果record.fileName
存在,它将作为文件名;否则,默认使用'download.xlsx'
作为文件名。
- 对下面这段代码的解释
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
document.body.appendChild(link)
: 这行代码将刚刚创建的<a>
元素(存储在变量link
中)添加到 HTML 文档的<body>
元素中。- 原因: 某些浏览器(例如 Firefox)需要将链接元素添加到文档中,才能正确处理
click()
事件和触发下载。如果不将链接添加到文档中,模拟点击可能不会起作用。 link.click()
: 这行代码程序matically 触发了<a>
元素的点击事件。此操作会启动文件的下载过程,因为之前设置了download
属性和href
属性指向包含文件数据的 URL。- 效果: 浏览器会处理这个点击事件,将链接指向的资源下载到用户的计算机上,而不是在新标签页中打开。
document.body.removeChild(link)
: 这行代码将之前添加到文档中的<a>
元素从<body>
元素中移除。- 原因: 下载完成后,链接元素不再需要在文档中保留,因此将其移除是一个清理步骤。这样可以保持文档的整洁,并避免可能的内存泄漏。
- 对下面这段代码的解释
// 释放 Blob URL
window.URL.revokeObjectURL(url);
详细解释
window.URL.revokeObjectURL(url)
:
-
window.URL.revokeObjectURL()
是一个浏览器 API,用于释放之前通过URL.createObjectURL()
创建的 URL。url
: 这是你之前生成的 Blob URL。它是一个临时的 URL,用于引用Blob
对象。
- 作用:
-
- 释放资源:
revokeObjectURL()
方法通知浏览器该 URL 资源不再需要。调用这个方法会释放分配给该 URL 的内存和资源。 - 避免内存泄漏: 如果不调用
revokeObjectURL()
,浏览器将继续保留对Blob
对象的引用,从而占用内存。特别是在处理大量数据或创建多个Blob
URL 时,释放这些 URL 可以避免潜在的内存泄漏。
- 释放资源:
使用场景
- 下载文件后: 当文件下载操作完成并且用户不再需要访问该
Blob
数据时,应该调用revokeObjectURL()
。 - 创建临时文件: 如果你创建了多个
Blob
URL,在不再需要它们的时候调用revokeObjectURL()
是一个良好的实践。