jQuery-从表下载csv

Question

我正在尝试将html表下载为cvs文件。我的代码正在工作，但是，它正在下载一个名为“未知”的文件，没有扩展名。csv'。如果我手动添加扩展名，csv文件将正确显示除第一行之外的所有内容，该行还包含html代码（请参见所附图片）

我做错了什么？

以下是脚本：

$("#btnExport ").on('click', function (event) {

            //Get table
        var table = $(".my-table")[0];

        //Get number of rows/columns
        var rowLength = table.rows.length;
        var colLength = table.rows[0].cells.length;

            console.log(rowLength, colLength);

        //Declare string to fill with table data
        var tableString = "";

        //Get column headers
        for (var i = 0; i < colLength; i++) {
            tableString += table.rows[0].cells[i].innerHTML.split(",").join("") + ",";
        }

        tableString = tableString.substring(0, tableString.length - 1);
        tableString += "\r\n";

        //Get row data
        for (var j = 1; j < rowLength; j++) {
            for (var k = 0; k < colLength; k++) {
                tableString += table.rows[j].cells[k].innerHTML.split(",").join("") + ",";
            }
            tableString += "\r\n";
        }

        //Save file
        if (navigator.appName == "Microsoft Internet Explorer") {
            //Optional: If you run into delimiter issues (where the commas are not interpreted and all data is one cell), then use this line to manually specify the delimeter
             tableString = 'sep=,\r\n' + tableString;

             myFrame.document.open("text/html", "replace");
             myFrame.document.write(tableString);
             myFrame.document.close();
             myFrame.focus();
             myFrame.document.execCommand('SaveAs', true, 'data.csv');
         } else {
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(tableString);
             $(event.target).attr({
                 'href': csvData,
                 'target': '_blank',
                 'download': 'my_data.csv'
             });
         }

    });

Answer 1

使用此功能

 function download(strData, strFileName, strMimeType) {
            var D = document,
                a = D.createElement("a");
                strMimeType= strMimeType || "application/octet-stream";


            if (navigator.msSaveBlob) { // IE10
                return navigator.msSaveBlob(new Blob([strData], {type: strMimeType}), strFileName);
            } /* end if(navigator.msSaveBlob) */


            if ('download' in a) { //html5 A[download]
                a.href = "data:" + strMimeType + "," + encodeURIComponent(strData);
                a.setAttribute("download", strFileName);
                a.innerHTML = "downloading...";
                D.body.appendChild(a);
                setTimeout(function() {
                    a.click();
                    D.body.removeChild(a);
                }, 66);
                return true;
            } /* end if('download' in a) */


            //do iframe dataURL download (old ch+FF):
            var f = D.createElement("iframe");
            D.body.appendChild(f);
            f.src = "data:" +  strMimeType   + "," + encodeURIComponent(strData);
            setTimeout(function() {
                D.body.removeChild(f);
            }, 333);
            return true;
        }

然后根据需要调用函数。我点击了按钮。这是代码

<button type="button" class="btn btn-warning btn-medium" id="download" style="color: white; font-weight: bold; background-color: #2175AD; border-bottom-color: #2175AD; margin-bottom: 100px;">Download table As CSV</button>
            <script>
            $("#download").on("click",function(){
                //$("#eventsMax").table2CSV();
                var mintime= d3.min(curdata,function(d){return d.time;});
                var maxtime= d3.max(curdata,function(d){return d.time;});
                var text="\t\t\t\t\t\t\tHere is the Data From "+mintime+" to "+maxtime+"\n\n";
                var csv = $("#eventsMax").table2CSV({delivery:'value'});
                csv=text+csv;
                download(csv, "realtimeData.csv", "text/csv");
            });

不要忘记包括API table2CSV。js发件人http://www.kunalbabre.com/projects/table2CSV.php

Answer 2

下面是从表中获取csv的另一种方法

csvVar='';
$('#<tableID> tr').each(function(){
  var len=$(this).find('td,th').length;
  i=0;
  $(this).find('td,th').each(function(){
    var cell=$(this);
    if(cell.children().prop('tagName') == 'INPUT')
      csvVar+=cell.children().val();
    else if(cell.children().prop('tagName') == 'SELECT')
      csvVar+=$('select option[value="'+cell.children().val() +'"]').html();
    else{
      t=cell.html();
      if(t.indexOf('<br>')>0)
        csvVar+=t.substring(0,t.indexOf('<br>'));
      else if(t.indexOf(',')>0)
        csvVar+=t.replace(',',';');
      else
        csvVar+=t;
    }
    if(i+1<len)
      csvVar+=',';
    i++;
  });
  csvVar+='\n';
});

--编辑--

var textFileAsBlob = new Blob([csvVar], {type:'text/plain'});
var fileNameToSaveAs = 'whateverTable.csv';

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.URL != null)
{
  // Chrome allows the link to be clicked
  // without actually adding it to the DOM.
  downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
}
else
{
  // Firefox requires the link to be added to the DOM
  // before it can be clicked.
  downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
}

downloadLink.click();