直击痛点！前端项目下载文件妙招，手把手教你轻松搞定

2023-05-24 15:52:28

前端文件下载指南：无需后端干预的实用技巧

在前端开发中，有时我们需要下载文件而无需将它们托管在后端服务器上。这在需要直接在客户端获取文件或处理较小文件时非常方便。以下是如何在前端项目中实现文件下载。

Blob API：原生文件下载

Blob API为我们提供了创建不可变原始文件（如图像、音频和视频）的对象。我们可以利用它将二进制文件数据转换为Blob，然后使用下载链接将其下载到客户端。

1. 创建 Blob 对象

const data = "Hello World!";
const blob = new Blob([data], { type: "text/plain" });

2. 创建下载链接

const url = URL.createObjectURL(blob);

3. 使用 a 标签触发下载

<a href="url" download="filename.txt">下载</a>

FileSaver.js：简化文件保存

FileSaver.js是一个库，可以简化将Blob对象保存到客户端设备的过程。

1. 安装 FileSaver.js

npm install --save file-saver

2. 导入 FileSaver.js

import { saveAs } from "file-saver";

3. 保存 Blob 对象

saveAs(blob, "filename.txt");

代码示例

Blob API

<a href="#" onclick="downloadBlob()">下载文件</a>

<script>
function downloadBlob() {
  const data = "Hello World!";
  const blob = new Blob([data], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "filename.txt";
  a.click();

  // 释放对象的引用
  URL.revokeObjectURL(url);
}
</script>

FileSaver.js

<a href="#" onclick="downloadFileSaver()">下载文件</a>

<script>
import { saveAs } from "file-saver";

function downloadFileSaver() {
  const data = "Hello World!";
  const blob = new Blob([data], { type: "text/plain" });

  saveAs(blob, "filename.txt");
}
</script>