如何使用jquery将数据从表格导出到csv文件

How to export data from table to csv file using jquery

本文关键字:csv 文件 表格 何使用 jquery 数据      更新时间:2023-09-26

我试图从数据表导出到CSV文件。这是整个函数。它下载了一个文件,但它显示了该表的整个代码,而没有分离出任何数据。我说的整个代码是指table/table

中的所有内容
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();
}

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

您必须从表中获取数据,创建一个表示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(["'ufeff", 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>

如果你发现任何错误,请在下面评论,我会修复它们

这是对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);
  
})

如果数据不是太复杂,那么您可以不使用jQuery:

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

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

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