使用 axios 下载 zip 文件

Question

我正在开发一个 React 项目，我正在获取一个 zip 文件作为对 REST API 的响应，我必须下载该文件并将其保存在客户端的计算机中。 zip 文件的大小可以从 100mb 到 800mb 不等。

Answer 1

您可以使用下面的代码，它是我的工作代码中的示例：

const config = {
  headers: { Authorization: `Bearer ${token}` },
  maxBodyLength: 'Infinity',
  responseType: 'stream',
};

let endpoint = `/api/reports?from=${startDate}&to=${endDate}`;
const baseUrl = 'https://api.example.com';
const response = await axios.get(`${baseUrl}${endpoint}`, config);

const download_dir = 'config/temp-downloads/';
const currentDate = new Date().toISOString().split('T')[0];
const fileNameWithDate = `${filename}_${currentDate}.zip`;
const fullPath = path.join(download_dir, fileNameWithDate);

console.log(`Download directory: ${download_dir}`);
console.log(`Saving file as: ${fileNameWithDate}`);

await new Promise((resolve, reject) => {
  const fileStream = fs.createWriteStream(fullPath);
  response.data.pipe(fileStream);

  fileStream.on('finish', () => {
    fileStream.close();
    console.log('Download complete!');
    resolve();
  });

  fileStream.on('error', (error) => {
    console.error('Error writing file:', error);
    reject(error);
  });
});

console.log(`File downloaded successfully at: ${fullPath}`);

授权和配置设置：

创建配置对象以包含授权标头（带有令牌）并指定两个附加设置： maxBodyLength: 'Infinity': 允许处理较大的响应正文。 responseType: 'stream'：表示响应应被视为流，这对于下载大文件很有用。

发出 API 请求：

使用 axios.get 将 HTTP GET 请求发送到 API 端点。由于配置中的 responseType: 'stream' 设置，响应以流的形式返回。

下载并保存文件：

创建一个新的 Promise 来异步处理下载和保存过程。

fs.createWriteStream(fullPath)

用于创建可写流，将文件保存到指定路径。 来自 API 的响应流 (response.data) 通过管道传输到文件流，该文件流将文件写入磁盘。 事件侦听器附加到文件流： finish：文件下载和写入完成时触发。流被关闭，并且调用resolve函数来指示成功。 error：如果在下载或写入过程中出现任何错误，则触发。调用拒绝函数时会出现错误。