js下载excel的方法

巴黎白菜帮

于 2024-08-22 10:51:05 发布

阅读量510

点赞数 7

文章标签： javascript excel 前端

本文链接：https://blog.csdn.net/qq_62780010/article/details/141421723

版权

  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() 是一个良好的实践。

巴黎白菜帮

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js下载excel的方法

Blob。
复制链接

扫一扫

js下载excel的方法

什么是 Blob？

Blob 构造函数的参数

MIME 类型

window.URL.createObjectURL(blob)

const link = document.createElement('a');

link.href = url;

link.setAttribute('download', record.fileName || 'download.xlsx');