Reactjs 响应不起作用时快速下载csv附件

你好，我正在尝试发送一个包含下载附件的post请求的响应。我得到了正确的响应，但没有下载或另存为弹出窗口。我已选中，标题已正确设置。我在使用express、mongodb、mongoose和nextjs。此控制器函数从请求和查询集合中获取开始和结束日期。cvsReadStream将数据流转换为csv表格式，然后通过管道发送到响应

控制器：

exports.postExportApplications = (req, res, next) => {
  const startDate = new Date(req.body.startDate)
  const endDate = new Date(req.body.endDate)
  const fileName = `${moment(startDate).format('MM-DD-YYYY')}-${moment(endDate).format('MM-DD-YYYY')}-Applications.csv`
  if (req.session.user) {
    res.attachment(fileName)
    return Application.find({ dateTime: { $gte: startDate, $lte: endDate } } )
      .sort({ dateTime: 1 })
      .then(applications => {
        Application.csvReadStream(applications)
          .pipe(res)
      })
  } else {
    return res.sendStatus(401);
  }
}

响应标题：

Connection: keep-alive
Content-Disposition: attachment; filename="12-13-1994-12-20-2020-Applications.csv"
Content-Type: text/csv; charset=utf-8
Date: Sat, 14 Dec 2019 22:42:10 GMT
Strict-Transport-Security: max-age=15552000; includeSubDomains
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

表单组件：

import React, { useState } from 'react'
import InputMask from 'react-input-mask'

const ExportAppsForm = (props) => {

  const defaultData = {
    startDate: { value: '', error: false },
    endDate: { value: '', error: false },
  }

  const [form, setform] = useState(defaultData)

  const handleChange = (event) => {
    const target = event.target
    const name = target.name
    setform({
        ...form,
        [name]: target.value
    })
  }

  const submitform = () => {
    props.handleFormSubmit({...form})
  }

  return (
    <form encType="multipart/form-data">
      <div className="form-row">
        <div className="form-group col-md-4">
          <label htmlFor="year">Start Date:</label>
          <InputMask 
            mask="99/99/9999"
            onChange={handleChange}
            value={form.startDate}
            name="startDate"
            className="form-control"
            id="startDate"
            aria-describedby="emailHelp"
            />
        </div>
        <div className="form-group col-md-4">
          <label htmlFor="make">End Date:</label>
          <InputMask 
            mask="99/99/9999"
            onChange={handleChange}
            value={form.endDate}
            name="endDate"
            className="form-control"
            id="endDate"
            />
        </div>
      </div>
      <button onClick={submitform} type="button" className="btn btn-primary">Export Now!</button>
    </form>
  )
}

export default ExportAppsForm;

---

看起来您只是在进行查询以获取csv格式的数据，因此HTTP get方法最适合这种情况，因为您没有修改任何资源 请参阅：

因此，首先，您必须更改控制器以接受查询作为查询参数，并使用axios发出GET请求，如下所示

export const getCsv = (params) => {
  axios({
      method: 'GET',
      url: '[YOUR_URL_HERE]'
      params,            
      responseType: 'arraybuffer',
      headers: {
         'Accept': 'text/csv'
      }
  }).then(response => {
     if(response.status === 200 && response){
        return response.data;
     }
  }).catch(error => console.log(error));         
}

在类组件中下载csv文件 使用名为file saver的包

npm i file-saver

并按如下方式导入包

import { saveAs } from 'file-saver';

然后，在组件中，可以对onClick处理程序使用getCSv函数

funcion onHandleDownload(query) => {
   getCsv(query).then(data => {
      const blob = new Blob([data], {
           type: 'text.csv',
       });
       saveAs(blob, 'csv_name.csv')
   })
}

---

这里有什么问题？没有发送文件？@未知-正确。没有弹出任何内容。您可以发布客户端并查看那里的console.log响应内容吗？当您从浏览器请求文件时会发生什么情况顺便说一句，那里没有明确的问题，请编辑您的帖子

funcion onHandleDownload(query) => {
   getCsv(query).then(data => {
      const blob = new Blob([data], {
           type: 'text.csv',
       });
       saveAs(blob, 'csv_name.csv')
   })
}