堆棧內存溢出
  簡體   English   中英

使用 JavaScript / Z6A2D7208853DAFFCB96FB5A7382B0 將 html 表數據導出到 Excel / Z6A2D7208853DAFFCB96FB5A7382B0 無法正常工作

[英]Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser

 原文  2014-03-11 06:22:13  6   16    javascript/ jquery/ html/ excel/ google-chrome

問題描述

我在速度模板中有一個 HTML 表。 I want to export the html table data to excel using either java script or jquery, comatibale with all browser. 我正在使用下面的腳本

<script type="text/javascript">
function ExportToExcel(mytblId){
       var htmltable= document.getElementById('my-table-id');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

該腳本在Mozilla Firefox中運行良好，彈出 excel 對話框並詢問打開或保存選項。 但是當我在Chrome 瀏覽器中測試相同的腳本時，它沒有按預期工作，當點擊按鈕時，沒有彈出 excel。 數據被下載到具有“文件類型：文件”的文件中，沒有像.xls這樣的擴展名 chrome 控制台中沒有錯誤。

Jsfiddle 示例：

http://jsfiddle.net/insin/cmewv/

這在 Mozilla 中可以正常工作，但在 chrome 中不行。

Chrome瀏覽器測試用例：

第一張圖片：我點擊導出到 excel 按鈕

第一張圖片：我點擊導出到excel按鈕

結果：

結果

16 個解決方案

解決方案1
 190 已采納  2014-06-06 11:59:59

Excel 導出腳本適用於 IE7+、Firefox 和 Chrome。

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>

解決方案2
 43  2016-08-04 07:35:30

Datatable 插件最好地解決了這個目的，並允許我們將 HTML 表格數據導出為 Excel、PDF、TEXT。 易於配置。

請在以下數據表參考鏈接中找到完整的示例：

https://datatables.net/extensions/buttons/examples/html5/simple.html

（數據表參考站點的截圖） 在此處輸入圖片說明

解決方案3
 39  2015-01-08 15:14:50

這可以幫助

function exportToExcel(){
var htmls = "";
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'; 
            var base64 = function(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            };

            var format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            };

            htmls = "YOUR HTML AS TABLE"

            var ctx = {
                worksheet : 'Worksheet',
                table : htmls
            }


            var link = document.createElement("a");
            link.download = "export.xls";
            link.href = uri + base64(format(template, ctx));
            link.click();
}

解決方案4
 14  2019-03-06 12:50:52

您可以使用帶有onclick事件的鏈接，而不是使用window.open 。
並且可以將html表放入uri中並設置要下載的文件名。

現場演示： 

 function exportF(elem) { var table = document.getElementById("table"); var html = table.outerHTML; var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url elem.setAttribute("href", url); elem.setAttribute("download", "export.xls"); // Choose the file name return false; }
 <table id="table" border="1"> <tr> <td> Foo </td> <td> Bar </td> </tr> </table> <a id="downloadLink" onclick="exportF(this)">Export to excel</a>

解決方案5
 14  2020-03-03 16:10:42

您可以使用tableToExcel.js導出 Excel 文件中的表格。

這以下列方式工作：

1）。 在您的項目/文件中包含此 CDN

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

2）。 使用 JavaScript：

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3）。 或者通過使用 Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

您可以參考此 github 鏈接以獲取任何其他信息

https://github.com/linways/table-to-excel/tree/master

或參考現場示例訪問以下鏈接

https://codepen.io/rohithb/pen/YdjVbb

希望這會幫助某人:-)

解決方案6
 12  2017-07-28 19:06:13

TableExport - 簡單、易於實現的庫，用於將 HTML 表導出到 xlsx、xls、csv 和 txt 文件。

要使用這個庫， TableExport調用TableExport構造函數：

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

可以傳入其他屬性來自定義表格、按鈕和導出數據的外觀。 在這里查看更多信息

解決方案7
 9  2014-03-18 07:02:16

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/試試這個鏈接它可能會解決你的問題

在此處輸入圖片說明

解決方案8
 7  2019-09-19 12:41:03

我對這些例子的合並：

https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

function exportTableToExcel(tableId, filename) {
    let dataType = 'application/vnd.ms-excel';
    let extension = '.xls';

    let base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    };

    let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    let render = function(template, content) {
        return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
    };

    let tableElement = document.getElementById(tableId);

    let tableExcel = render(template, {
        worksheet: filename,
        table: tableElement.innerHTML
    });

    filename = filename + extension;

    if (navigator.msSaveOrOpenBlob)
    {
        let blob = new Blob(
            [ '\ufeff', tableExcel ],
            { type: dataType }
        );

        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        let downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);

        downloadLink.download = filename;

        downloadLink.click();
    }
}

解決方案9
 5  2020-12-02 18:49:45

使用 Jquery 的最簡單方法

只需添加這個：

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

然后添加 Jquery 腳本：

<script type="text/javascript">
  $(document).ready(function () {
      $("#exportBtn1").click(function(){
        TableToExcel.convert(document.getElementById("tab1"), {
            name: "Traceability.xlsx",
            sheet: {
            name: "Sheet1"
            }
          });
        });
  });
</script>

然后添加 HTML 按鈕：

<button id="exportBtn1">Export To Excel</button><br><br>

注意： "exportBtn1"將是按鈕 ID，“tab1”將是表 ID

解決方案10
 4  2015-11-19 19:46:32

你可以使用像 ShieldUI 這樣的庫來做到這一點。

它支持導出為 XML 和 XLSX 廣泛使用的 Excel 格式。

更多細節在這里： http : //demos.shieldui.com/web/grid-general/export-to-excel

解決方案11
 4  2016-03-16 12:54:59

關於 sampopes 於 2014 年 6 月 6 日 11:59 的回答：

我插入了一個字體大小為 20px 的 css 樣式來顯示更大的 excel 數據。 在 sampopes 代碼中，缺少前導<tr>標簽，所以我首先輸出標題，而不是循環中的其他表格行。

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // id of table
    var lines = tab.rows.length;

    // the first headline of the table
    if (lines > 0) {
        tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
    }

    // table data lines, loop starting from 1
    for (j = 1 ; j < lines; j++) {     
        tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</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
    // console.log(tab_text); // aktivate so see the result (press F12 in browser)

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

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

    return (sa);
}

解決方案12
 4  2018-06-06 15:04:47

 function exportToExcel() { var tab_text = "<tr bgcolor='#87AFC6'>"; var textRange; var j = 0, rows = ''; tab = document.getElementById('student-detail'); tab_text = tab_text + tab.rows[0].innerHTML + "</tr>"; var tableData = $('#student-detail').DataTable().rows().data(); for (var i = 0; i < tableData.length; i++) { rows += '<tr>' + '<td>' + tableData[i].value1 + '</td>' + '<td>' + tableData[i].value2 + '</td>' + '<td>' + tableData[i].value3 + '</td>' + '<td>' + tableData[i].value4 + '</td>' + '<td>' + tableData[i].value5 + '</td>' + '<td>' + tableData[i].value6 + '</td>' + '<td>' + tableData[i].value7 + '</td>' + '<td>' + tableData[i].value8 + '</td>' + '<td>' + tableData[i].value9 + '</td>' + '<td>' + tableData[i].value10 + '</td>' + '</tr>'; } tab_text += rows; var data_type = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table border="2px">{table}</table></body></html>', base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function (s, c) { return s.replace(/{(\\w+)}/g, function (m, p) { return c[p]; }) } var ctx = { worksheet: "Sheet 1" || 'Worksheet', table: tab_text } document.getElementById("dlink").href = data_type + base64(format(template, ctx)); document.getElementById("dlink").download = "StudentDetails.xls"; document.getElementById("dlink").traget = "_blank"; document.getElementById("dlink").click(); }

這里的值 1 到 10 是您獲得的列名

解決方案13
 1  2018-10-26 10:34:49

我的@sampopes 版本回答

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

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

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

需要 iframe

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

用法

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});

解決方案14
 0  2020-11-24 07:32:41

Very Easy Code
Follow this instruction
Create excel.php file in your localhost root directory and copy and past this code.
Like this
http://localhost/excel.php?fileName=excelfile&link=1
<!-- http://localhost/excel.php?fileName=excelfile&link=2 -->

<!DOCTYPE html>
<html>
<head>
    <title>Export excel file from html table</title>
</head>
<body style="display:
<?php 
if( $_REQUEST['link'] == 1 ){
    echo 'none';
}
?>;
">

<!-- --------Optional-------- -->
Excel <input type="radio" value="1" name="exportFile">
Others <input type="radio" value="2" name="exportFile">
<button onclick="myFunction()">Download</button>
<br>
<br>
<!-- --------/Optional-------- -->

<table width="100%" id="tblData">
    <tbody>
        <tr>
            <th>Student Name</th>
            <th>Group</th>
            <th>Roll No.</th>
            <th>Class</th>
            <th>Contact No</th>
        </tr>
        <tr>
            <td>Bulbul Sarker</td>
            <td>Science</td>
            <td>1</td>
            <td>Nine</td>
            <td>01724....</td>
        </tr>
        <tr>
            <td>Karim</td>
            <td>Science</td>
            <td>3</td>
            <td>Nine</td>
            <td>0172444...</td>
        </tr>
    </tbody>
</table>

</body>
</html>

<style>
    table#tblData{
        border-collapse: collapse;
    }
    #tblData th,
    #tblData td{
        border:1px solid #CCC;
        text-align: center;
    }
</style>

<script type="text/javascript">

    /*--------Optional--------*/
    function myFunction() {
        let val = document.querySelector('input[name="exportFile"]:checked').value;     
        if(val == 1)
        {
            this.exportTableToExcel();
        }
    }
    /*--------/Optional--------*/

    function exportTableToExcel(){
        let filename2 = "<?php echo $_REQUEST['fileName']; ?>";
        let tableId = 'tblData';

        var downloadLink;
        var dataType = 'application/vnd.ms-excel';
        var tableSelect = document.getElementById(tableId);
        var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

            // Specify file name
            let filename = filename2?filename2+'.xls':'excel_data.xls';

            // Create download link element
            downloadLink = document.createElement("a");

            document.body.appendChild(downloadLink);

            if(navigator.msSaveOrOpenBlob){
                var blob = new Blob(['\ufeff', tableHTML], {
                    type: dataType
                });
                navigator.msSaveOrOpenBlob( blob, filename);
            }else{
            // Create a link to the file
            downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

            // Setting the file name
            downloadLink.download = filename;

            //triggering the function
            downloadLink.click();
        }       
    }
</script>

<?php
if( $_REQUEST['link'] == 1 ){       
    echo '<script type="text/javascript">
    exportTableToExcel();
    </script>'; 
}
?>

解決方案15
 0  2021-10-27 06:32:56

html

<a onclick="download_to_excel()">Download</a> 

    
 <table id="tableId">
          <thead>
              <tr>
              <th>No</th>
              <th>Name</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody>
          <tr>
            <td colspan="3">Data Not Found</td>
          </tr>
          </tbody>
        </table>

JavaScript

function download_to_excel()
{ 

var tab_text="<table><tr>";
var textRange = ''; 
var j=0;
var tab = document.getElementById('tableId'); // id of table

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

tab_text +="</table>";

var a = document.createElement('a');
var data_type = 'data:application/vnd.ms-excel';
a.href = data_type + ', ' + encodeURIComponent(tab_text);
//setting the file name
a.download = 'file_name.xls';
//triggering the function
a.click();
//just in case, prevent default behaviour
e.preventDefault();

}

解決方案16
 0  2022-08-02 05:09:53

以下代碼適用於最新的Chrome、Edge、Firefox ，不需要第三方庫。

HTML

<button onclick="download_table_as_csv('MyTableID_Value');">Export as CSV</button>

腳本

function download_table_as_csv(table_id, separator = ',') {
// Select rows from table_id
var rows = document.querySelectorAll('table#' + table_id + ' tr');
// Construct csv
var csv = [];
for (var i = 0; i < rows.length; i++) {
    var row = [], cols = rows[i].querySelectorAll('td, th');
    for (var j = 0; j < cols.length; j++) {
        // Clean innertext to remove multiple spaces and jumpline (break csv)
        var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
        // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
        data = data.replace(/"/g, '""');
        // Push escaped string
        row.push('"' + data + '"');
    }
    csv.push(row.join(separator));
}
var csv_string = csv.join('\n');
// Download it
var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
var link = document.createElement('a');
link.style.display = 'none';
link.setAttribute('target', '_blank');
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用javascript / jquery將HTML表格導出到excel 使用 JavaScript 將 HTML 表格數據導出到 Excel JavaScript - 將HTML表格數據導出到Excel中 使用JavaScript將HTML表格導出到Excel Chrome，導出 html 表到 Excel 使用javascript將大型html表格導出到excel 如何使用 javascript 將 html 表導出到 excel HTML表格-Excel導出無法正常工作Google Chrome和IE 在Chrome擴展程序中導出為Excel文件不適用於HTML表 在firefox瀏覽器中將動態html表導出為javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM