如何使用jquery将表中的数据导出到csv文件

Question

我正在尝试从数据表导出到 CSV 文件。 这是我的全部功能。 它下载一个文件，但它显示了表格的整个代码，而不是将任何数据分开。 当我说整个代码时，我的意思是“表/表”中的所有内容

function displayDataTable(index){
$("#pageOverlay").empty();
    html = "<div id='volumeChartDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>header1</th><th>header2</th><th>header3</th></tr></thead><tbody><tr><td>cell1-1</td><td>cell1-2</td><td>cell1-3</td></tr><tr><td>bell2-1</td><td>bell2-2</td><td>bell2-3</td></tr><tr><td>fell3-1</td><td>fell3-2</td><td>fell3-3</td></tr></tbody></table><input type='button' value='Close' onclick='closeOverlay()'>&nbsp;&nbsp;<input type='button' id='exportDataTable' value='Export Table'></div>";
  $("#pageOverlay").html(html);
// export data function    
  $("#exportDataTable").click(function (e) {
      window.open('data:application/vnd.ms-excel,' + $('.dataTable').html());
      e.preventDefault();
});
   openOverlay();
}

Answer 1

CSV 格式不能接受$('.dataTable').html()因为.html()不是结构化数据，它甚至不是数据，只是一个愚蠢的 hmtl。

你必须从你的表中获取数据，制作一个代表 CSV 格式的字符串，然后下载它，因为你没有在下面的工作演示中显示你的表数据结构

 $('#export').click(function() { var titles = []; var data = []; /* * Get the table headers, this will be CSV headers * The count of headers will be CSV string separator */ $('.dataTable th').each(function() { titles.push($(this).text()); }); /* * Get the actual data, this will contain all the data, in 1 array */ $('.dataTable td').each(function() { data.push($(this).text()); }); /* * Convert our data to CSV string */ var CSVString = prepCSVRow(titles, titles.length, ''); CSVString = prepCSVRow(data, titles.length, CSVString); /* * Make CSV downloadable */ var downloadLink = document.createElement("a"); var blob = new Blob(["\", CSVString]); var url = URL.createObjectURL(blob); downloadLink.href = url; downloadLink.download = "data.csv"; /* * Actually download CSV */ document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); }); /* * Convert data array to CSV string * @param arr {Array} - the actual data * @param columnCount {Number} - the amount to split the data into columns * @param initial {String} - initial string to append to CSV string * return {String} - ready CSV string */ function prepCSVRow(arr, columnCount, initial) { var row = ''; // this will hold data var delimeter = ','; // data slice separator, in excel it's `;`, in usual CSv it's `,` var newLine = '\\r\\n'; // newline separator for CSV row /* * Convert [1,2,3,4] into [[1,2], [3,4]] while count is 2 * @param _arr {Array} - the actual array to split * @param _count {Number} - the amount to split * return {Array} - splitted array */ function splitArray(_arr, _count) { var splitted = []; var result = []; _arr.forEach(function(item, idx) { if ((idx + 1) % _count === 0) { splitted.push(item); result.push(splitted); splitted = []; } else { splitted.push(item); } }); return result; } var plainArr = splitArray(arr, columnCount); // don't know how to explain this // you just have to like follow the code // and you understand, it's pretty simple // it converts `['a', 'b', 'c']` to `a,b,c` string plainArr.forEach(function(arrItem) { arrItem.forEach(function(item, idx) { row += item + ((idx + 1) === arrItem.length ? '' : delimeter); }); row += newLine; }); return initial + row; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="export">export</button> <table class="dataTable"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>

^{如果您发现任何错误，请在下面评论，我会修复它们}

Answer 2

有谁知道如何使用此代码在同一 CSV文档中向新工作表中添加新的数据行？

我有一个要打印的报告，但是我需要从该查询的结果中分离出用户查询的参数。 我想通过将数据集放在同一CSV文档的两个单独的页面中来做到这一点。

有什么想法吗？

Answer 3

对 Medet 答案的一个小改进，假设您的标题在 tr 中，所有这些代码所做的就是将所有列和行推送到普通数组中并导出到 csv。

$('#export').click(function() {
  
  var titles = [];
  var data = [];
  
        $('.table tr').each(function() {
                data.push($(this));
            });

    csv_data = []

  data.forEach(function(item,index){
    td = item[0].children
    for(i=0;i<td.length;i++){
     
      csv_data.push(td[i].innerText)
    }
   
    csv_data.push('\r\n')
  })

  var downloadLink = document.createElement("a");
  var blob = new Blob(["\ufeff", csv_data]);
  var url = URL.createObjectURL(blob);
  downloadLink.href = url;
  downloadLink.download = "minicrawl.csv";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  
})

Answer 4

如果数据不是太复杂，那么你可以不用 jQuery：

const csvContents = [].map.call(document.getElementById('dataTable').rows,
        tr => [].map.call(tr.cells, td => td.textContent).join(',')
    ).join('\n'))

然后像其他答案一样下载文件。

如果数据有点复杂（例如，数据中有逗号），这将不起作用，但在这种情况下，您可能应该首先使用 csv 库。