使用javascript / jquery將HTML表格導出到excel

Question

最近，我建立了一個網站，能夠將表格數據導出到Excel文件。 我為此使用了table2excel插件，該插件在Chrome上可以正常運行，但在IE，Safari，Firefox和其他任何瀏覽器上均無法使用。 想知道我在這里做錯什么了嗎，是否還有其他插件或方法可以做到這一點：

（注意：我正在使用稱為葉片的laravels模板引擎來包括table2excel插件）html：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title></title>

    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    {{ HTML::style('css/style.css') }}
    <!-- Javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    {{ HTML::script('js/jquery.table2excel.js') }} 
    {{ HTML::script('js/script.js') }} 

</head>

            <table id="signedinTable" class="peopleTable table table-hover">
                <thead>
                    <tr>
                        <th>Voornaam</th>
                        <th>Achternaam</th>
                        <th>Telefoon nr.</th>
                        <th>E-mail</th>
                        <th>Bedrijf</th>
                        <th>Partner?</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($results as $result)

                    @if($result->isGoing == 1)

                        <tr class="signedinRow">
                            <td>{{ $result->firstname }}</td>
                            <td>{{ $result->lastname }}</td>
                            <td>{{ $result->phone }}</td>
                            <td>{{ $result->email }}</td>
                            <td>{{ $result->company }}</td>
                            <td class="signedinPartner">{{ $result->partner }}</td>
                        </tr>

                    @endif

                    @endforeach
                </tbody>
            </table>

        </div>
        <button id="signedinExport" class="excl btn btn-primary">Download als excel bestand</button>

jQuery的：

$("#signedinExport").click(function(){
    $("#signedinTable").table2excel({
        exclude:".noExl",
        name:"Aangemelde mensen",
        filename:"Aangemelde mensen"
    });
});

我沒有從firefox或safari中得到任何錯誤，也請注意，我並沒有要求人們為我編寫任何代碼，只是朝着正確的方向發展就太好了！

請！ 非常感謝您的幫助！

Answer 1

不使用jQuery函數，還有更多代碼，但是您可以嘗試一下：

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

只需創建一個空白的iframe：

<iframe id="txtArea1" style="display:none"></iframe>

在以下位置調用此函數：

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

鏈接到原始帖子

Answer 2

我最近遇到了類似的問題，並發現了以下大部分代碼（大部分）：

function exportTableToCSV($table, filename, answer) {
  var $rows = $table.find('tr'),
    //Temporary delimiter characters unlikely to be typed by keyboard
    //This is to avoid accidentally splitting the actual contents
    tmpColDelim = String.fromCharCode(11), //vertical tab character
    tmpRowDelim = String.fromCharCode(0), //null character
    //actual delimiter characters for CSV format
    colDelim = '","',
    rowDelim = '"\r\n"',
    //Grab text from table into CSV formatted string
    csv = '"' + $rows.map(function(i, row) {
      var $row = $(row),
        $cols = $row.find('th,td');
      return $cols.map(function(j, col) {
        var $col = $(col),
          text = $col.text();
        return text.replace(/"/g, '""'); //escape double quotes
      }).get().join(tmpColDelim);
    }).get().join(tmpRowDelim)
    .split(tmpRowDelim).join(rowDelim)
    .split(tmpColDelim).join(colDelim) + '"';
  //Data URI
  var IEwindow = window.open();
  IEwindow.document.write(csv);
  IEwindow.document.close();
  if (IEwindow.document.execCommand('SaveAs', false, filename + ".csv")) {
    saveAsAnswer = 'saved';
  } else {
    saveAsAnswer = 'not saved';
  }
  IEwindow.close();
}

對我感到羞恥，因為他不記得我在哪里找到了它，並且在應得的信貸額度上沒有給予信貸...

我使用的插件不多，因此喜歡上面的代碼僅使用jQuery。 我將上述代碼用於Internet Explorer11。為實現跨瀏覽器的支持，您需要編輯“數據URI”部分（對數據URI進行快速SO或Google搜索）。

我創建了一個jsfiddle來向您展示它的工作方式。

使用javascript / jquery將HTML表格導出到excel

問題描述

2 個解決方案

解決方案1
0 2016-02-25 15:25:53

解決方案2
0 2016-02-25 15:46:11

使用javascript / jquery將HTML表格導出到excel

問題描述

2 個解決方案

解決方案1 0 2016-02-25 15:25:53

解決方案2 0 2016-02-25 15:46:11

解決方案1
0 2016-02-25 15:25:53

解決方案2
0 2016-02-25 15:46:11