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

IT技术 javascript jquery html excel google-chrome
2021-01-12 04:49:40

我在速度模板中有一个 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按钮

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

结果：

结果

6个回答

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 中，当您单击下载按钮时，使用此方法根本没有任何反应。没有控制台错误或任何东西。
2021-03-13 04:49:40
如何更改 Randome 名称。我想设置特定名称。
2021-03-23 04:49:40
导出名称始终为 download.xls
2021-03-27 04:49:40
是否可以将文件名从“download.xls”更改为其他名称？
2021-04-02 04:49:40
“download.xls 的文件格式和扩展名不匹配”这让经理不高兴：/有什么想法吗？
2021-04-06 04:49:40

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

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

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

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

我可以使用这个插件将样式应用到我的 excel 吗？
2021-03-24 04:49:40
导出按钮将删除每个页面行数下拉列表，如果您想同时保留这两个内容？请检查datatables.net/extensions/buttons/examples/initialisation/...来解决它。
2021-03-28 04:49:40
我的天啊！这是一个很棒的插件！...并且嵌入了几个插件！导出、排序、重新排序、打印预览等...只需 1 次即可解决我所有的数据显示需求！
2021-04-03 04:49:40
@Addy 这是一个 DataTables 唯一的解决方案，对吧？
2021-04-07 04:49:40
插件很棒。有没有办法只提取相关代码来导出数据并在此处突出显示？那将是一个很大的帮助。提前致谢
2021-04-11 04:49:40

这可以帮助

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 表中可见的列怎么办？
2021-03-26 04:49:40
您好，我无法对工作表进行任何 EXCEL 操作，例如：Autosum。是因为这个EXCEL表格的数据格式还是其他任何问题..我需要帮助做一些操作。
2021-04-09 04:49:40

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

希望这会帮助某人:-)

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>

如何在函数中设置表格边框、td 宽度等？
2021-03-23 04:49:40
其它你可能感兴趣的问题
上一篇JavaScript：location.href 在新窗口/选项卡中打开？ 下一篇将 lodash 导入 angular2 + typescript 应用程序