javascript - 从 API 结果导出 CSV 在 Firefox JavaScript 上不起作用

Question

我有一个页面，可以从 API 获取数据并将其显示到表格中。

然后它有一个按钮可以将此数据导出到 CSV 文件中。 它在 google chrome 上按预期工作，但在 firefox 上却不然，并且不会抛出任何错误。

免责声明:关于正则表达式部分，我知道它很丑陋并且写得不好，但我无法仅用一行完成它。

代码如下: HTML 按钮

<div class="export-container">
    <button class="csv request-submit-button export-button" onclick="csvButton()">
      <?xml version="1.0" encoding="UTF-8"?>
      <svg enable-background="new 0 0 29.978 29.978" version="1.1" viewBox="0 0 29.978 29.978" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
        <path d="m25.462 19.105v6.848h-20.947v-6.848h-4.026v8.861c0 1.111 0.9 2.012 2.016 2.012h24.967c1.115 0 2.016-0.9 2.016-2.012v-8.861h-4.026z"/>
        <path d="m14.62 18.426l-5.764-6.965s-0.877-0.828 0.074-0.828 3.248 0 3.248 0 0-0.557 0-1.416v-8.723s-0.129-0.494 0.615-0.494h4.572c0.536 0 0.524 0.416 0.524 0.416v8.742 1.266s1.842 0 2.998 0c1.154 0 0.285    0.867 0.285 0.867s-4.904 6.51-5.588 7.193c-0.492 0.495-0.964-0.058-0.964-0.058z"/>
      </svg>
            Exportar
    </button>
    </div>

JS 代码:

var getData = (url) => {  

   fetch(url, {
            headers: {
                'Authorization': "Basic " + btoa('email/token' + ":" + token)
            },
            credentials: 'omit'
        })
            .then(response => response.json())
            .then(result => {
                TICKETS_CSV = [...TICKETS_CSV, ...result.results];                      
                console.log('RESULTS TicketsCSV: ', TICKETS_CSV);              
                if(result.next_page !== null){
                  getData(result.next_page);
                } else {
                  _gerarCsv(TICKETS_CSV, ORG_CSV);
                  return
                }
                return (result);
            })
            .catch(error => console.error('FETCH ERROR TICKETS CSV: ', error)); 
    };




function csvButton(){  
  if(MSG_CSV == true){    
    TICKETS_CSV = [];
    getData(URL_CSV, TICKETS_CSV);   
  } else {
    alert("Nenhum ticket para ser exportado");
    return;
  }
}



var _gerarCsv = function(obj, org){
  var csv = 'ID; Assunto; Tipo; Solicitante; Criado Em;  Ultima Atividade; Status; Modulo; Severidade; Organização\n';

  obj.forEach(function(row){

      var subject = row.subject;      
      var status_csv = STATUS[row.status].name;      
      subject = subject.replace(/,/g, '');      
      subject = subject.replace(/(\r\n|\n|\r)/gm, " ");
      subject = subject.replace(/\s+/g, ' ').trim();
      subject = subject.replace(/\#\s?/g, '');

      csv += row.id;
      csv += ";" + subject;
      csv += ";" + TYPE[row.type];
      csv += ";" + getUserName(row.requester_id);
      csv += ";" + convertDate(row.created_at);
      csv += ";" + convertDate(row.updated_at);
      csv += ";" + status_csv;
      csv += ";" + getCustomFieldModulo(row.custom_fields);
      csv += ";" + getCustomFieldSeveridade(row.custom_fields);
      csv += ";" + org;
      csv += '\n';

  });

  var hiddenElement = document.createElement('a');  
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'tickets.csv';
  hiddenElement.click();
};

我已经进行了所有测试，发现代码的所有部分都运行正常，只是不下载文件

Answer 1

深入挖掘我发现了问题

要在 Firefox 上工作，我必须放置 document.body.appendChild()

var hiddenElement = document.createElement('a');  
    hiddenElement.href = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv);
    hiddenElement.target = '_blank';  
    hiddenElement.download = 'tickets.csv';   
    document.body.appendChild(hiddenElement);
    hiddenElement.click();
    document.body.removeChild(hiddenElement);

还是谢谢