Question

根据选择的选项，我具有PDF，CSV之类的选项它将以该格式下载，我已经实现了react-csv，用于以CSV文件格式下载文件

import React from "react";
import {CSVLink, CSVDownload} from 'react-csv';

const options = [
  { name: 'Select', id: "-1" },
  { name: 'Export to Excel', id: 'Excel' },
  { name: 'Export to PDF', id: 'PDF' }
]

class ExportButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      showdwnloadFormats: false,
      selectedOption: -1,
headers: [
  { label: "First Name", key: "firstname" },
  { label: "Last Name", key: "lastname" },
  { label: "Email", key: "email" }
];

data: [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];
    };
  }
  exportCSV = () => {
    return(
    <CSVLink
      data={this.state.data}
      headers={this.state.headers}
    >
      Export to Excel
   </CSVLink>);
  }


 handleChange = event => {
    console.log(event.target.value);
    const selectedvalue = event.target.value;
    if( selectedvalue === "Excel"){
      return this.exportCSV();
    }
    else if(selectedvalue === 'PDF'){
      return this.exportPDF();
    }
    else {
      this.setState({ selectedOption: "-1" })
    }
    this.setState({ selectedOption: event.target.value });
  }
render(){
    const { selectedOption } = this.state;
return (      
      <React.Fragment>
            <select
                name="export"
                value={selectedOption}
                className="exportSearchSelect"
                style={{ marginLeft: "2px" }}
                onChange={this.handleChange}
              >
                {options.length != 0 &&
                  options.map((option, index) => {
                    const { name, id } = option;
                    return (
                      <option key={index} value={id}>
                        {name}
                      </option>
                    );
                  })}
             </select>
      </React.Fragment>
    );
  }
}

Answer 1

我认为只有您单击该链接，您的下载才会发生。看来您不这样做。

此外，您不需要任何库即可将JSON下载为csv，您可以使用纯JavaScript做到这一点，我认为这种JavaScript在您的情况下会更好。

json to csv

反应csv不适用于下拉选择

1 个答案: