js 下载文件到本地|极客笔记

js 下载文件到本地

在 Web 开发中，有时我们需要让用户下载特定的文件，比如 PDF、图片、文本文件等。在 JavaScript 中，可以通过创建 Blob 对象来实现将文本内容或者文件内容转换为可下载的文件，并提供给用户下载。在本文中，我们将详细介绍如何使用 JavaScript 下载文件到本地。

使用 Blob 对象下载文件

Blob 对象是 JavaScript 提供的一个对象，它代表了一个不可变、原始数据的类文件对象。我们可以通过将文本内容或者二进制内容封装到 Blob 对象中，然后将其转换为可供下载的文件。

以下是一个简单的示例，演示如何使用 Blob 对象下载一个文本文件：

const text = 'Hello, world!';
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
a.click();

URL.revokeObjectURL(url);

在上面的代码中，我们首先创建了一个包含文本内容 ‘Hello, world!’ 的 Blob 对象，并指定了类型为 ‘text/plain’。然后通过 URL.createObjectURL() 方法生成一个可下载的 URL，并将其赋值给 <a> 标签的 href 属性。最后设置 <a> 标签的 download 属性为文件名，并触发点击事件来下载该文件。最后我们通过 URL.revokeObjectURL() 方法来释放 URL 对象。

使用 fetch 下载文件

除了直接创建 Blob 对象，还可以使用 fetch 函数来下载文件并转换为 Blob 对象。以下是一个简单的示例，演示如何使用 fetch 函数下载一个图片文件：

fetch('https://www.example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg';
    a.click();

    URL.revokeObjectURL(url);
  });

在上面的代码中，我们使用 fetch 函数请求一个图片文件，并使用 blob() 方法将响应内容转换为 Blob 对象。然后通过创建 <a> 标签，设置 href 和 download 属性，触发点击事件来下载该图片文件。

下载二进制文件

有时候我们需要下载二进制文件，比如 PDF、音频、视频等。可以通过相同的方法将二进制内容转换为 Blob 对象，并下载到本地。以下是一个示例代码，演示如何下载一个 PDF 文件：

fetch('https://www.example.com/document.pdf')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'document.pdf';
    a.click();

    URL.revokeObjectURL(url);
  });

在上面的代码中，我们使用 fetch 函数请求一个 PDF 文件，然后将响应内容转换为 Blob 对象，并通过 <a> 标签进行下载。