如何將具有可擴展行的反應表導出到csv或excel？

Question

我有兩天試圖在反應中從表組件中導出CSV或excel，最后我終於找到ExcelentExport.js，我選擇它是因為它從未設置數據的表中導出，如果您想知道我為什么要這樣選擇：我應該說，因為我有120個表，並且花很長時間指定表頭，從服務器獲取的數據格式是這樣的

[
  {"id_group":"1","name":"Visitor","members":[],"total":"0","discount":"0"}, 
  {"id_group":"2","name":"Guest","members":[],"total":"0","discount":"0"}
]

現在我不知道我該如何在反應中使用`Excellent Export，如果您知道更好的庫可以為我提供幫助，請提及它，謝謝

Answer 1

ExcellentExport用於將常規HTML表轉換為CSV或XLS。 從我看來，您已經有了原始數據，因此您可以直接將其直接轉換，完全繞過React或ExcellentExport：

 function convertToCSV(tableData, delimiter = ',') { if (!Array.isArray(tableData) || !tableData.length) { throw new Error('Table data should be a non-empty array of column/value rows'); } var colNames = Object.keys(tableData[0]); var rows = tableData.map(rowData => { var row = []; for (var key in rowData) { // I noticed that members column is an array, not sure how you handle it // but here it joins the members with comma and wraps the whole thing in // double quotes if (Array.isArray(rowData[key]) && rowData[key].length) { row.push('"' + rowData[key].join(',') + '"'); } else { row.push(rowData[key]); } } return row.join(delimiter); }); rows.unshift(colNames.join(delimiter)); return rows.join("\\n") } const csv = convertToCSV([ {"id_group":"1","name":"Visitor","members":[],"total":"0","discount":"0"}, {"id_group":"2","name":"Guest","members":[],"total":"0","discount":"0"} ]) console.info(csv)