JavaScript - 将HTML表格数据导出到Excel中

Question

I'm trying to convert HTML tables to Excel, i have tried with a JavaScript function which converts a simple table to Excel, it is working fine. 我正在尝试将HTML表转换为Excel，我尝试使用JavaScript函数将一个简单的表转换为Excel，它工作正常。 If I have multiple tables how will I be able to add all the table data into the Excel file. 如果我有多个表，我将如何将所有表数据添加到Excel文件中。 here's what I tried. 这是我试过的。 I've created 2 tables and given table index testTable and testTable1 . 我创建了2个表并给出了表索引testTable和testTable1 。

How will i pass these 2 table ids to the JavaScript function on click of the button? 如何在点击按钮时将这两个表ID传递给JavaScript函数？ right now on click of the button only the first table is exported to Excel as I'm passing only 'testTable' . 现在单击按钮只有第一个表导出到Excel，因为我只传递'testTable' 。 how will i be able to export multiple tables eg: testTable , testTable1 into Excel? 我如何能够将多个表导出，例如： testTable ， testTable1到Excel？

Here's the JavaScript: 这是JavaScript：

<script>

var tableToExcel = (function() {
var uri = '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>{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]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()

</script>

Here's the HTML part, 这是HTML部分，

<table id="testTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Unix<br>
                NT 3.1</th>
            <th>Unix<br>
                NT 3.51</th>
            <th>Unix<br>
                95</th>
        </tr>
    </thead>
</table>
<table id="testTable1">
    <thead>
        <tr>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Windows<br>
                NT 3.1</th>
            <th>Windows<br>
                NT 3.51</th>
            <th>Windows<br>
                95</th>
        </tr>
    </thead>
</table>

Please let me know, how this can be done? 请告诉我，如何做到这一点？
Thanks 谢谢

Answer 1

I recommend another Format method. 我推荐另一种Format方法。 the John Resig micro-template is a very good and simple tool for do what you need. John Resig微模板是一个非常好的简单工具，可以满足您的需求。 ( ejohn microtemplating ) （ ejohn microtemplating ）

(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str.replace(/[\r\t\n]/g, " ")
              .split("{{").join("\t")
              .replace(/((^|}})[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)}}/g, "',$1,'")
              .split("\t").join("');")
              .split("}}").join("p.push('")
              .split("\r").join("\\'")
              + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

It is very simple to use. 它使用起来非常简单。 This allows not only show variables between HTML but also execute JavaScript code 这不仅允许在HTML之间显示变量，还允许执行JavaScript代码

Your template string need some modification to work with this microtemplate. 您的模板字符串需要一些修改才能使用此微模板。

{{for(var i=0; i<tables.length;i++){ }}
    <table>
        {{=tables[i]}}
    </table>
{{ } }}

finally only need to select all the tables that appear in your example 最后只需要选择示例中出现的所有表格

document.getElementsByTagName("table");

you can see how it works http://jsfiddle.net/Scipion/P8rpn/1/ 你可以看看它是如何工作的http://jsfiddle.net/Scipion/P8rpn/1/

Answer 2

create a function and pass the tableID to it 创建一个函数并将tableID传递给它

 function passing_id_to_excel(tableID){ 
  var myTableid =
 document.getElementById(tableID) //remaining code }

Answer 3

Add a checkbox for each table. 为每个表添加一个复选框。 Use javascript to process those that are checked. 使用javascript处理已检查的那些。
In case if you just want to convert every table, you could use $('table').each(function() { do something }) . 如果你只想转换每个表，你可以使用$('table').each(function() { do something }) 。

JavaScript - 将HTML表格数据导出到Excel中

问题描述

3 个解决方案

解决方案1
9 已采纳 2013-03-05 15:05:13

解决方案2
0 2013-03-05 13:46:27

解决方案3
0 2013-03-07 21:14:00

JavaScript - 将HTML表格数据导出到Excel中

问题描述

3 个解决方案

解决方案1 9 已采纳 2013-03-05 15:05:13

解决方案2 0 2013-03-05 13:46:27

解决方案3 0 2013-03-07 21:14:00

解决方案1
9 已采纳 2013-03-05 15:05:13

解决方案2
0 2013-03-05 13:46:27

解决方案3
0 2013-03-07 21:14:00