react 调用后台服务下载 zip 文件

在React中调用后台服务下载zip文件的方法有多种，以下是一种基本的方法：

首先，你需要创建一个按钮或其他触发事件的组件，用户点击该按钮触发下载操作。

import React from 'react';

class DownloadButton extends React.Component {
  handleDownload = () => {
    fetch('/api/download-zip', { // 后台接口地址
      method: 'GET',
      headers: {
        'Content-Type': 'application/zip', // 告诉后台要下载zip文件
      },
    })
      .then(response => response.blob()) // 将响应数据转换为Blob对象
      .then(blob => {
        const url = window.URL.createObjectURL(blob); // 通过Blob创建下载链接
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'download.zip'; // 设置下载文件的名称
        document.body.appendChild(a);
        a.click(); // 模拟点击下载链接
        window.URL.revokeObjectURL(url); // 释放URL对象
      })
      .catch(error => {
        console.error('下载失败:', error);
      });
  };

  render() {
    return (
      <button onClick={this.handleDownload}>下载ZIP文件</button>
    );
  }
}

上述代码中，我们使用了fetch函数发送GET请求到后台接口地址`/api/download-zip`，通过设置请求头`Content-Type`为`application/zip`告诉后台要下载zip文件。在获取到后台响应后，我们将其转换为Blob对象，然后通过`window.URL.createObjectURL(blob)`方法创建下载链接。接着，我们动态创建了一个`<a>`元素，并将其添加到DOM中，在`href`属性中设置下载链接，`download`属性设置下载文件的名称。最后，我们模拟点击`<a>`元素触发下载操作，并通过`window.URL.revokeObjectURL(url)`释放URL对象。

当用户点击按钮时，会触发`handleDownload`方法，从而进行下载操作。这样我们就可以在React中调用后台服务下载zip文件了。当然，具体的后台接口实现方式和路径需要根据项目实际情况进行设置。