前端如何下载本地文件

HTML5引入了新的download属性，允许开发者通过简单的HTML标签实现文件下载功能。这个方法最适合用于静态文件的下载。

1、基本用法

<a href="path/to/your/file.txt" download="filename.txt">Download File</a>

这种方法通过设置href属性为文件的路径，并添加download属性来实现文件下载。当用户点击链接时，浏览器会自动下载指定文件，并将其保存为filename.txt。

2、动态文件下载

如果需要动态生成文件并下载，可以通过JavaScript来创建一个隐藏的<a>标签并触发点击事件。

function downloadFile(content, fileName, contentType) {

    const a = document.createElement("a");
    const file = new Blob([content], { type: contentType });
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

调用这个函数时，可以传入文件内容、文件名和内容类型：

downloadFile("Hello, world!", "example.txt", "text/plain");

二、Blob对象

Blob对象是前端进行文件操作的核心API之一，适用于处理二进制数据。

1、创建Blob对象

Blob（Binary Large Object）允许我们创建一个包含二进制数据的对象，可以用于下载文件。

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

2、创建链接并下载

通过创建一个URL对象链接到Blob，并将其传递给隐藏的<a>标签来实现文件下载。

const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

3、释放URL对象

为了避免内存泄漏，应该在下载完成后释放URL对象。

URL.revokeObjectURL(url);

三、FileSaver.js库

FileSaver.js是一个轻量级的JavaScript库，专门用于处理文件下载，简化了Blob对象和URL创建的过程。

1、安装FileSaver.js

使用npm安装FileSaver.js：

npm install file-saver

2、使用FileSaver.js

import { saveAs } from 'file-saver';

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
saveAs(blob, "example.txt");

四、Fetch API

Fetch API是现代浏览器中用于进行HTTP请求的标准API，可以用于从服务器获取文件并下载。

1、下载文件

fetch('path/to/your/file.txt')

  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "filename.txt";
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(url);
  })
  .catch(error => console.error('Error downloading file:', error));

2、处理大文件

Fetch API可以处理较大的文件，但要注意内存占用和网络带宽。可以通过响应流（ReadableStream）来处理大文件。

五、Data URL

Data URL是一种将文件内容直接嵌入到URL中的方法，适用于小文件或简单数据。

1、创建Data URL

const data = "Hello, world!";

const dataUrl = `data:text/plain;charset=utf-8,${encodeURIComponent(data)}`;

2、下载文件

const a = document.createElement("a");

a.href = dataUrl;
a.download = "example.txt";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

3、注意事项

Data URL方法不适合处理大文件，因为它会将整个文件内容嵌入到URL中，可能导致内存占用过高。