时间戳

首页 > 解决方案 > 响应不工作时快速下载 csv 附件

reactjs - 响应不工作时快速下载 csv 附件

问题描述

您好，我正在尝试从包含下载附件的 post req 发送响应。我得到正确的响应，但没有下载或另存为弹出窗口。我检查并正确设置了标题。我正在使用 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;

axios 发布请求：

export const postExportApplications = (query) => {
  return axios.post(`${BASE_URL}/export`, query).then(res => res.data)
}

标签： reactjsexpressmongoosedownloadstream

解决方案

看起来您只是在查询以获取 csv 格式的数据，因此 HTTP GET 方法最适合这种情况，因为您没有修改任何资源，请参阅：http ://restcookbook.com/HTTP%20Methods/idempotency /。

因此，首先您必须更改控制器以接受查询作为查询参数并使用 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';

然后，在您的组件中，您可以将 getCSv 函数用于您的 onClick 处理程序

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

推荐阅读