React.js 下载文件

在 Web 应用程序中，下载文件是一项常见的任务。React.js 是一个受欢迎的前端框架，提供了一种简单的方式来处理文件下载。本文将介绍如何在 React.js 中实现文件下载。

准备工作

首先，我们需要一个能够返回文件的后端 API。这个 API 可以根据前端传递的文件名称或 ID，从服务器中获取文件并将其返回给前端。

在本文中，我们将使用 Express.js 框架来实现这个 API。以下是一个简单的示例代码：

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

app.get('/download/:file', (req, res) => {
  const fileName = req.params.file;
  const filePath = path.join(__dirname, 'downloads', fileName);
  const fileStream = fs.createReadStream(filePath);

  fileStream.pipe(res);
});

上述代码会返回一个下载文件的 API，该 API 会根据传递的文件名称从本地的下载目录中读取文件并返回给前端。

现在我们已经有了后端 API，下面看看如何在 React.js 中调用该 API 并实现文件下载。

实现文件下载

要实现文件下载，我们可以使用 HTML 的 <a download> 属性提供的功能。该属性会把链接地址中的文件下载到本地。

在 React.js 中，我们可以将该属性用于一个按钮或链接元素上。下面是一个示例代码：

import React from 'react';

function DownloadButton() {
  const downloadFile = () => {
    const fileName = 'example.pdf';
    const downloadUrl = `http://localhost:3000/download/${fileName}`;

    // Create an anchor element
    const link = document.createElement('a');
    link.href = downloadUrl;

    // Set the download attribute to download the file
    link.setAttribute('download', fileName);

    // Append the anchor element to the body
    document.body.appendChild(link);

    // Click the anchor element to start downloading the file
    link.click();

    // Remove the anchor element from the body
    document.body.removeChild(link);
  };

  return (
    <button onClick={downloadFile}>
      Download File
    </button>
  );
}

export default DownloadButton;

上述代码中，我们创建了一个名为 DownloadButton 的 React 组件。该组件包含一个 downloadFile 方法，该方法会创建一个 HTML 标签 <a> 元素，将其 href 属性设置为下载文件的 URL，然后将该元素添加到 body 中，模拟了用户单击下载文件链接的操作。然后，我们再立即从 body 中删除该元素，以确保不会对应用程序造成不必要的影响。

通过以上步骤，我们就可以在 React.js 中实现文件下载了。

总结

本文介绍了如何在 React.js 中实现文件下载。我们首先需要一个能够返回文件的后端 API，然后使用 HTML 的 download 属性来实现文件下载。在 React.js 中使用 download 属性时，我们需要手动创建一个 <a> 元素，并将其添加到 body 中，然后通过点击该元素的方式来触发下载。