Node.js 下载文件流与前端下载

Node.js 下载文件流与前端下载

---

介绍

在Web开发中，有时需要实现文件下载的功能。本文将介绍如何使用Node.js实现文件下载流，并通过前端触发下载。

后端实现(Node.js)

1. 安装依赖

首先，确保你已经安装了Node.js。然后，在你的项目中使用以下命令安装 express 和 fs：

npm install express fs

2. 创建服务器

创建一个简单的Express服务器，监听指定端口：

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

const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

3. 实现下载文件流

添加一个路由，用于处理文件下载请求。以下是一个简单的例子：

app.get('/download', (req, res) => {
  const filePath = 'path/to/your/file.txt'; // 替换为实际文件路径

  const fileStream = fs.createReadStream(filePath);
  fileStream.pipe(res);

  res.setHeader('Content-disposition', 'attachment; filename=file.txt');
  res.setHeader('Content-type', 'application/octet-stream');
});

这个路由会读取指定文件的流并通过响应将其传输给前端。

前端实现

1. 发起下载请求

在前端，你可以使用简单的JavaScript来发起文件下载请求。例如，可以使用 fetch API：

function downloadFile() {
  fetch('/download')
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(new Blob([blob]));
      const a = document.createElement('a');
      a.href = url;
      a.download = 'file.txt';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    })
    .catch(error => console.error('Error downloading file:', error));
}

调用 downloadFile 函数时，它会发起对 /download 路由的请求，并将文件流转换为可下载的blob。

2. 创建触发下载的按钮

在HTML中添加一个按钮，点击该按钮将触发文件下载：

<button onclick="downloadFile()">下载文件</button>

总结

通过Node.js创建一个文件下载流，配合前端的文件下载请求，你可以实现简单而有效的文件下载功能。根据实际需求，你可能需要对代码进行调整和优化。希望这个文档对你实现文件下载有所帮助。