首页 > 解决方案 > 单击按钮后 CSV 不下载,

问题描述

每当我单击该按钮时,它只显示日志并且没有开始下载我正在生成的 csv 文件。我不知道我应该使用什么方法。我只是反应和 javascript 的新手。

这是我的代码,

getReport = async function(){
     
      const jsonUrl = 'https://us-central1-connected-nursing-home-2.cloudfunctions.net/retrieveEHR';
      const res = await fetch(jsonUrl);
      const json = await res.json();
      console.log(json);
     
      const data = json.map(row=> ({
        firstName : row.firstName,
        lastName : row.lastName,
        birthDate : row.birthdate,


      }));
       const download = function(data){
      const blob = new Blob([data, {type: 'text/csv'}]);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      // link.setAttribute('hidden','');
      link.setAttribute('href',url);
      link.setAttribute('download','data.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      const csvData = objectToCsv(data);
      console.log(csvData);
   }
     

      const objectToCsv = function(data){
        const csvRows = [];
        const headers = Object.keys(data[0]);
        csvRows.push(headers.join(','));
        console.log(csvRows)

        for (const row of data){
         const values = headers.map(header => {
         const escaped = (''+row[header]).replace(/"/g,'\\"');
         return `"${escaped}"`;
          });
            csvRows.push(values.join(','));

          };
            return csvRows.join('\n')
          
        }    
      }

这是我的按钮

<Button className="ehr-export-btn" 
        name="Export to PDF"        
        onClick={this.getReport}>
      <FontAwesomeIcon icon={faFilePdf} size="lg" /></Button>

标签: jsonreactjsexport-to-csv

解决方案


推荐阅读