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ではありません。

はあなたが

$('#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>

下にデモ働いてここにあなたのテーブルのデータ構造を示していないとして、CSV形式を表す文字列を作る、あなたのテーブルからデータを取得し、それをダウンロードする必要が

^{もしあなたがバグを見つけたら、以下にコメントしてください。私はそれらを修正します}