使用JavaScript将HTML表格数据导出到Excel / jQuery在Chrome浏览器中无法正常工作

90

我在力度模板中有一个HTML表。我想使用Java脚本或jquery将html表格数据导出到excel，与所有浏览器兼容。我正在使用以下脚本

<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不会弹出。数据下载到文件名为“ file type：file”的文件中，没有扩展名，例如.xls。Chrome 控制台中没有错误。

jsfiddle示例：

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

在mozilla中工作正常，但在chrome中则不能。

Chrome浏览器测试用例：

第一张图片：我点击“导出到Excel”按钮

第一张图片：我点击“导出到Excel”按钮

结果：

结果

javascript  jquery  html  excel  google-chrome 
— 杉根
source
测试用例是铬
— Sukane
1
如果您使用开源产品LibreOffice和Chrome浏览器，则上述测试用例将失败。但是，如果您安装了MS Office，则代码将可以正常工作。
— Sukane 2014年

Answers:

164

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>
— 样品
source
1
如果不是，那么这行是什么？var txt = document.getElementById（'txtArea1'）。contentWindow;
— 样品，2014年
3
在Chrome浏览器中，当您单击下载按钮时，使用此方法完全没有反应。没有控制台错误或任何东西。
— Kyle Bachan 2014年
1
完美+1 ！！！它可以在IE 11，Chrome 35，Firefox 29，Opera 17中运行，但不能在Safari 5.1.7中运行！:(
— Suganth G 2014年
9
如何更改Randome名称。我设置了专有名称。
— osman Rahimi
21
“ download.xls的文件格式和扩展名不匹配”这不是让经理高兴的地方：//有什么想法吗？
— 汤姆·斯蒂克
34

Datatable插件可以最好地解决目的，并允许我们将HTML表格数据导出到Excel，PDF，TEXT。易于配置。

请在下面的数据表参考链接中找到完整的示例：

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

（来自数据表参考站点的截图） 在此处输入图片说明

— 阿迪亚
source
4
我的天啊！这是一个很棒的插件！...并且嵌入了多个插件！！导出，排序，重新排序，打印预览等...仅需一枪即可解决所有显示需求的数据！
— Gusstavv Gil
我可以使用此插件将样式应用于Excel吗？
— Shruthi Sathyanarayana
@Addy这是仅DataTables解决方案，对吗？
— 卡尔
1
如果您想同时保留这两件事，则导出按钮将删除每个页面的行数下拉列表。请datatables.net/extensions/buttons/examples/initialisation/...来解决它。
— Kaushik Das
该插件很棒。有没有一种方法可以提取相关代码以导出数据并在此处突出显示？那将是很大的帮助。在此先感谢
— Murtuza Husain
31

这可以帮助

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();
}
— 托德雷斯德
source
1
如果我只想导出html表中可见的列怎么办？
— Nouman Bhatti
嗨，我无法对工作表执行任何EXCEL操作，例如：自动求和。是因为此EXCEL工作表的数据格式或任何其他问题。.我需要帮助来做一些操作。
— 南达纪ALLU
9

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ 尝试使用此链接可能会解决您的问题

在此处输入图片说明

— 乌奇特·什雷斯塔（Uchit Shrestha）
source
Uchit，谢谢您的回答。但是我已经尝试了这个示例。正如我提到的，我质疑它在Mozilla中可以正常运行，但在Chorme中却不能。可以在Chrome浏览器中尝试该示例吗？
— Sukane 2014年
5
我已经在jsfiddle上尝试过您的代码，即时消息得到了肯定的结果。即使在chorme中也能正常工作。您可以在上图中看到下载成功
— Uchit Shrestha 2014年
1
Uchit，谢谢。是的，代码正在运行。问题是我使用的是Libre Office，因此在Chrome导出到excel时无法正常工作（问题中的屏幕截图）。但是正如您所提到的，在MS Office中它可以工作。感谢您为此提供jQuery代码。
— Sukane 2014年
此函数未导出具有下拉列表和时间戳的字段的值
— SNT93，2015年
它不适用于html的倍数表，而只能用于一个表。如何使用倍数表做到这一点？
— ignacio chiazzo 2015年
9

除了使用之外，window.open您还可以使用带有onclick事件。
您可以将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>
展开摘要

— R3tep
source
如何在功能中设置表格边框，td宽度等？
— Zeffry Reynando
8

表导出

表导出简单，易于实现的库，用于将HTML表导出到xlsx，xls，csv和txt文件。

要使用此库，只需调用TableExport构造函数：

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

// OR simply

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

// OR using jQuery

$("table").tableExport();

可以传入其他属性，以自定义表格，按钮和导出数据的外观。在这里查看更多信息

— 签名
source
它支持PhantomJs吗？如何报告错误？
— golimar
5

我合并了以下示例：

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();
    }
}
— 罗曼·捷列夫（Roman Terekhov）
source
1
未捕获的ReferenceError：未定义base64
— PedroJoaquín
4

关于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);
}
— 贝特布尔舍
source
您能告诉我如何从导出到Excel中删除特定的列。例如，我想避免tab.rows[j].cells[13] ，您的帮助非常感谢
— Disera 2016年
很好的答案，对于一个非常简单的表，我只保留最后一行：window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));编码非常重要。
— 佩雷斯Pages
4 

 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是您要获取的列名

— 岩
source
4

您可以使用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

希望这会帮助某人:-)

— 阿曼·库玛·古普塔（Aman Kumar Gupta）
source
1

我的@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');
});
— 伊凡达
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.