JS下载文件流|极客笔记

JS下载文件流

在前端开发中，有时候我们需要提供文件下载的功能，比如下载Excel表格、PDF文件等。在本文中，我们将详细讨论如何使用JavaScript实现下载文件流的功能。

什么是文件流？

在计算机中，文件流是一个字节序列，它通过流式传输（streaming）的方式来读取或写入数据。文件流可以是输入流（用于读取数据）或输出流（用于写入数据）。在前端开发中，我们经常会遇到需要下载文件流的情况，比如从服务器端获取数据并以文件流形式下载到本地。

使用JavaScript下载文件流

我们可以利用JavaScript发送HTTP请求获取文件流，并将其下载到本地。下面是一个简单的示例代码，演示了如何使用JavaScript下载文件流：

// 创建一个异步函数，用于发送HTTP请求获取文件流
async function downloadFile(url) {
  const response = await fetch(url); // 发送HTTP请求
  const fileStream = await response.blob(); // 将响应体转换为文件流

  // 创建一个临时链接，指向文件流的URL
  const urlObject = URL.createObjectURL(fileStream);

  // 创建一个a标签，用于模拟点击下载
  const link = document.createElement('a');
  link.href = urlObject;
  document.body.appendChild(link);
  link.click();

  // 释放URL对象
  URL.revokeObjectURL(urlObject);
}

在上面的示例代码中，我们定义了一个downloadFile函数，用于发送HTTP请求获取文件流，并将其下载到本地。首先使用fetch函数发送HTTP请求，然后使用response.blob()方法将响应体转换为文件流。接着，我们创建一个临时链接(urlObject)，指向文件流的URL。最后，我们创建一个<a>标签，将链接指向urlObject，并模拟点击下载。

实际应用示例

下面我们通过一个实际的案例来演示如何使用JavaScript下载文件流。假设我们有一个服务器接口可以返回一个Excel文件流，我们要使用JavaScript下载这个Excel文件到本地。

服务器端

首先，我们需要准备一个简单的服务器端代码，用于提供Excel文件流的接口。这里使用Node.js和Express框架来搭建服务器。

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

// 定义接口，返回一个Excel文件流
app.get('/download-excel', (req, res) => {
  const excelPath = 'sample.xlsx'; // 假设存在一个名为sample.xlsx的Excel文件
  const fileStream = fs.createReadStream(excelPath);

  // 设置响应头，告诉浏览器响应体的数据类型为Excel文件
  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

  // 将文件流通过响应对象发送到客户端
  fileStream.pipe(res);
});

// 启动服务器，监听在3000端口
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的服务器端代码中，我们定义了一个路由/download-excel，当有客户端请求这个接口时，服务器会返回一个名为sample.xlsx的Excel文件流。

客户端

接下来，我们来编写前端代码，使用JavaScript发送HTTP请求获取Excel文件流并下载到本地。

async function downloadExcel() {
  const url = 'http://localhost:3000/download-excel'; // 服务器端接口的URL

  try {
    await downloadFile(url); // 调用前面定义的downloadFile函数，下载文件流
  } catch (error) {
    console.error('Failed to download Excel file:', error);
  }
}

// 点击按钮时触发下载Excel文件
document.getElementById('downloadBtn').addEventListener('click', downloadExcel);

在上面的代码中，我们定义了一个downloadExcel函数，用于触发下载Excel文件流的逻辑。当用户点击一个按钮（假设按钮的id为downloadBtn）时，触发downloadExcel函数。