React点击onClick下载带查询参数CSV，参数错误时弹窗提示实现问题

云上老周

2026-10-6

解决方案

原有window.open的实现逻辑无法提前检测接口返回状态，只要调用就会新开标签页，因此会暴露错误JSON内容。我们可以通过「先预请求校验结果、再触发下载」的逻辑优化，修改后的代码如下：

const doSubmit = async () => {
  try {
    const timeZoneoffset = new Date().getTimezoneOffset();
    const reqUrl = `${apiEndpoint}/export-device-data?fromDate=${fromDateTime}&toDate=${toDateTime}&userId=${values.userId}&deviceTypeId=${deviceId}&timeZoneoffset=${timeZoneoffset}`;
    
    // 先发起请求校验返回结果
    const res = await fetch(reqUrl);
    
    // 判断是否为错误响应：状态码异常 或者 返回内容是JSON（错误场景）
    if (!res.ok || res.headers.get('content-type')?.includes('application/json')) {
      const errInfo = await res.json();
      // 这里可以替换为你项目内的消息提示组件，比如antd的message.error
      alert(errInfo.message || '下载请求异常，请检查参数后重试');
      return;
    }

    // 响应正常，触发下载
    const blob = await res.blob();
    const downloadUrl = window.URL.createObjectURL(blob);
    const aLink = document.createElement('a');
    aLink.style.display = 'none';
    aLink.href = downloadUrl;
    // 自定义下载的文件名
    aLink.download = `设备数据导出_${new Date().getTime()}.csv`;
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
    // 释放临时URL内存
    window.URL.revokeObjectURL(downloadUrl);
  } catch (e) {
    alert('下载失败，请稍后重试');
  }
};