无法使用 jQuery 将 html 表导出到 excel答案

【问题标题】：Can not export html table to excel using jQuery无法使用 jQuery 将 html 表导出到 excel
【发布时间】：2013-07-11 17:13:32
【问题描述】：

我在 HTML 表中有大约 5000 行（tr），每行有 10 列（td）。现在我正在尝试使用以下 jQuery 代码将整个 HTML 表导出到 excel：

var test = $('#data');
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(test.html()));

也尝试过许多其他 jQuery 插件，例如 DataTables.net、jqWidgets 和 jqGrid，但每次我的浏览器崩溃并且必须重新加载页面。

【问题讨论】：

尝试先将数据发送到您的应用服务器，然后从您的服务器设置标头。
无法使用应用服务器，因为我只能使用客户端来实现。
你能在 jsfiddle 中重现这个问题吗？
很抱歉，当我尝试在那里发布 HTMl 数据和 jQuery 代码时，即使 jsFiddle 也给了我同样的错误。
也许这个链接让你在各个方面都清楚：stackoverflow.com/questions/4325968/window-open-with-headers

标签： jquery html excel

【解决方案1】：

你可以试试这个插件 - tableExport.js

HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.table2excel.js"></script>
<body>
<tr class="noExl">
  <th>#</th>
  <th>Column heading</th>
  <th>Column heading</th>
  <th>Column heading</th>
</tr>
</body>

jQuery：

$("button").click(function(){
  $("#table2excel").table2excel({
    // exclude CSS class
    exclude: ".noExl",
    name: "Excel Document Name"
  });
});

插件下载： http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html

【讨论】：

【解决方案2】：

我的朋友建议使用这种方法 - 尝试创建一个 blob 并使用 navigator.msSaveBlob() 或 navigator。 msSaveOrOpenBlob() 。

    var csvContent=data; 
    var blob = new Blob([csvContent],{
        type: "text/csv;charset=utf-8;",
    });

    navigator.msSaveBlob(blob, "filename.csv") 
//or navigator. msSaveOrOpenBlob(blob, "filename.csv")

msdn.microsoft.com/en-us/library/ie/hh772331(v=vs.85).aspx

【讨论】：

【解决方案3】：

如果您的目标是非 IE 浏览器，请尝试以下操作：

var test = $('#data');
window.open('data:application/vnd.ms-excel,' + 
            encodeURIComponent(test[0].outerHTML));

使用 Chrome 在这里查看它的工作原理：http://jsfiddle.net/56tvb/2/。

如果您将 Internet Explorer 定位为浏览器，则必须寻找不同的方法，因为当前的方法行不通。来自 MSDN 库，data Protocol 主题说：

数据 URI 仅支持以下元素和/或属性。
object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, 
and so on.
数据 URI 可以嵌套。

出于安全原因，数据 URI 仅限于下载资源。 数据 URI 不能用于导航、脚本或填充框架或 iframe 元素。

【讨论】：

【解决方案4】：

window.open() 的范围和限制已在这篇文章中得到很好的解释：Export to CSV using jQuery and html

出于您的考虑，我测试了 2500 行，它工作正常。（我无法在 jsfiddler 上上传这么多数据，但我相信它也适用于 5000 行。）

另外，我怀疑您是否将 html 表包装到容器 DIV 中。只需将您的 html 表放入 DIV 并像这样使用 -

$("[id$=myButtonControlID]").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
    e.preventDefault();   });

http://jsfiddle.net/AnilAwadh/wJyWm/

encodeURIComponent() 是一个 Javascript 函数，用于对特殊字符进行编码（如果您的数据有任何特殊字符）并且它的使用是可选的。

【讨论】：