洞悉前端下载文件功能，从入门到精通！

2024-01-14 00:05:06

前言

在前端开发中，文件下载是一个常见的功能，无论是下载文本、图片还是视频，都需要用到相应的技术。在本文中，我们将全面讲解前端文件下载，从基本概念到高级应用，帮助您掌握这个实用的功能。

从字符串下载开始

最简单的情况是，我们需要从一个字符串中下载内容。这通常用于下载纯文本文件，如日志文件或配置文件。我们可以使用JavaScript的内置函数 Blob 和 URL.createObjectURL() 来实现。

// 定义要下载的字符串
const text = 'Hello, world!';

// 创建Blob对象，指定字符串类型
const blob = new Blob([text], { type: 'text/plain' });

// 创建一个指向Blob对象的URL
const url = URL.createObjectURL(blob);

// 创建一个a元素，并设置href属性指向URL
const a = document.createElement('a');
a.href = url;

// 设置a元素的download属性，指定下载文件名
a.download = 'hello.txt';

// 触发a元素的点击事件，实现下载
a.click();

// 记得在下载完成后，释放Blob对象的URL
URL.revokeObjectURL(url);

处理复杂文件类型

除了字符串，我们还需要处理更复杂的文件类型，如图片、视频和文档。这些文件类型都有自己的MIME类型，我们需要在创建Blob对象时指定正确的MIME类型。

// 定义要下载的图片URL
const imageUrl = 'https://example.com/image.png';

// 获取图片的二进制数据
fetch(imageUrl)
  .then(res => res.blob())
  .then(blob => {
    // 创建Blob对象，指定图片的MIME类型
    const imgBlob = new Blob([blob], { type: 'image/png' });

    // 创建一个指向Blob对象的URL
    const url = URL.createObjectURL(imgBlob);

    // 创建一个a元素，并设置href属性指向URL
    const a = document.createElement('a');
    a.href = url;

    // 设置a元素的download属性，指定下载文件名
    a.download = 'image.png';

    // 触发a元素的点击事件，实现下载
    a.click();

    // 记得在下载完成后，释放Blob对象的URL
    URL.revokeObjectURL(url);
  });

通过后端返回文件

有时我们需要通过后端API来返回文件。此时，我们需要在后端将文件内容转换为字符串或二进制数据，然后通过HTTP响应返回给前端。

# 后端代码（Python为例）

from flask import Flask, send_file

app = Flask(__name__)

@app.route('/download_file')
def download_file():
    # 获取要下载的文件路径
    file_path = 'path/to/file.txt'

    # 将文件内容转换为二进制数据
    with open(file_path, 'rb') as f:
        file_data = f.read()

    # 设置HTTP响应头，指定文件的MIME类型和下载文件名
    response = send_file(file_data,
                        mimetype='text/plain',
                        attachment_filename='file.txt')

    return response

在前端，我们可以使用 fetch() API来发起HTTP请求并下载文件。

// 定义下载文件的后端API地址
const apiUrl = 'https://example.com/api/download_file';

// 发起HTTP请求，获取文件数据
fetch(apiUrl)
  .then(res => res.blob())
  .then(blob => {
    // 创建Blob对象，指定文件的MIME类型
    const fileBlob = new Blob([blob], { type: 'text/plain' });

    // 创建一个指向Blob对象的URL
    const url = URL.createObjectURL(fileBlob);

    // 创建一个a元素，并设置href属性指向URL
    const a = document.createElement('a');
    a.href = url;

    // 设置a元素的download属性，指定下载文件名
    a.download = 'file.txt';

    // 触发a元素的点击事件，实现下载
    a.click();

    // 记得在下载完成后，释放Blob对象的URL
    URL.revokeObjectURL(url);
  });