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

Posted 2023-02-22

技术标签:

【中文标题】使用 JavaScript / JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作【英文标题】：Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser 【发布时间】：2014-04-14 14:32:38 【问题描述】：

我在速度模板中有一个 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。数据以“文件类型：文件”的文件下载，没有像 .xls 这样的扩展名 chrome 控制台没有错误。

Jsfiddle 示例：

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

这在 mozilla 中可以正常工作，但在 chrome 中不行。

Chrome 浏览器测试用例：

第一张图片：我点击导出到excel按钮

结果：

【问题讨论】：

测试用例适用于 chrome 如果您使用开源产品 LibreOffice 和 Chrome 浏览器，上述测试用例将失败。但是，如果您安装了 MS Office，那么代码将正常工作。 【参考方案1】：

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>

【讨论】：

在 Chrome 中，当您单击下载按钮时，使用此方法时根本没有任何反应。没有控制台错误或任何东西。如何更改随机名称。我想设置特定的名称。 "download.xls 的文件格式和扩展名不匹配" 这不是让经理高兴：/ 有什么想法吗？是否可以将文件名从“download.xls”更改为其他名称？导出名称始终为download.xls【参考方案2】：

Datatable 插件最好的解决了这个问题，允许我们将 HTML 表格数据导出到 Excel 、 PDF 、 TEXT 中。易于配置。

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

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

（来自数据表参考网站的屏幕截图）

【讨论】：

天哪！这是一个很棒的插件！...并且嵌入了几个插件！导出、排序、重新排序、打印预览等...只需 1 次即可解决我所有的数据显示需求！我可以使用这个插件将样式应用到我的 excel 中吗？ @Addy 这是一个仅限 DataTables 的解决方案，对吧？导出按钮将删除每个页面行数下拉列表，如果你想保留这两个东西？请检查datatables.net/extensions/buttons/examples/initialisation/… 解决。插件很棒。有没有办法只提取相关代码来导出数据并在此处突出显示？那将是一个很大的帮助。提前致谢【参考方案3】：

这会有所帮助

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();

【讨论】：

如果我只想导出 html 表中可见的列怎么办？？您好，我无法对工作表进行任何 EXCEL 操作，例如：Autosum。是因为这个EXCEL表格的数据格式还是其他问题..我需要帮助做一些操作。【参考方案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

希望这会对某人有所帮助:-)

【讨论】：

【参考方案5】：

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

【讨论】：

如何在函数中设置表格边框、td 宽度等？【参考方案6】：

TableExport - 用于将 HTML 表格导出为 xlsx、xls、csv 和 txt 文件的简单、易于实现的库。

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

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

// OR simply

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

// OR using jQuery

$("table").tableExport();

可以传入其他属性来自定义表格、按钮和导出数据的外观。 See here more info

【讨论】：

它支持 PhantomJs 吗？如何报告错误？【参考方案7】：

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ 试试这个链接它可能会解决你的问题

【讨论】：

Uchit，谢谢你的回答。但我已经尝试过这个例子。正如我所提到的，我质疑它在 Mozilla 中可以正常工作，但在 Chorme 中不行。请在 Chrome 浏览器中尝试这个例子吗？我在 jsfiddle 上试过你的代码，我得到了积极的结果。即使在 chorme 也能正常工作。上图中可以看到下载成功了 Uchit，谢谢。是的，代码正在运行。问题是我使用的是 Libre Office，所以在 Chrome 导出到 excel 时工作不正常（参考 m 问题中的屏幕截图）。但正如你所提到的，它在 MS Office 中工作。感谢您为此提供 jQuery 代码。此函数不会导出具有下拉列表和时间戳的字段的值它不适用于多个表格 html，仅适用于一个表格。我怎么能用多个表做到这一点??????【参考方案8】：

我对这些例子的合并：

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();

【讨论】：

Uncaught ReferenceError: base64 is not defined【参考方案9】：

使用 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】：

您可以使用 ShieldUI 之类的库来执行此操作。

它支持导出为 XML 和 XLSX 广泛使用的 Excel 格式。

更多详情：http://demos.shieldui.com/web/grid-general/export-to-excel

【讨论】：

【参考方案11】：

关于 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);

【讨论】：

您能否告诉我如何从导出到 Excel 中删除特定列。例如，我想避免tab.rows[j].cells[13] ，非常感谢您的帮助非常好的答案，对于一个非常简单的表格，我只保留最后一行：window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text)); 编码非常重要。【参考方案12】：

 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】：

我的@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】：

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  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】：

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();

【讨论】：

以上是关于使用 JavaScript / JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章

如何使用jQuery / javascript将事件处理限制为每X秒一次？

如何使用jquery将javascript代码注入iframe头部

使用 jQuery 将表单数据转换为 JavaScript 对象

如何使用 javascript/jquery 将大型 html 块附加到刀片文件？

使用 JavaScript/jQuery 将 URL 保存在锚标记中？

使用 jQuery 将多个 CSS 类的 Javascript 数组分配给一个元素