js前端通过后端接口下载压缩包(xxx.zip)

1.方法

// 导出压缩包（xxx.zip）
export const handleExportZip = (data, name) => {
  var blob = new Blob([data], { type: 'application/zip' });
  var downloadElement = document.createElement('a');
  var href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = name; //定义文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放掉blob对象
};

2.接口

// 下载图片详情[/x/x/x/x]
export const getxxxxApi = async (params: any) => {
  return request('/api/x/x/x/x/x', {
    method: 'GET',
    params: params,
    responseType: 'blob',
    headers: { 'Content-Type': 'application/json;application/octet-stream' },
  });
};

3.使用

<Button
    type="primary"
    onClick={async () => {
        try {
               const data = await getxxxxApi({
                  series_id: +query.id,
                  name: paramsData.product_name,
                  export_status: paramsData.export_status,
                });
                handleExportZip(data, '文件压缩包');
              } catch (error) {}
      }}>
     导出
</Button>

4.备注

最重要的有两点：
（1）方法中 type: 'application/zip' 的配置
（2）接口中 responseType: 'blob' 的配置