JavaScript - 将HTML表数据导出到Excel中 [英] JavaScript - export HTML table data into Excel

查看:108
本文介绍了JavaScript - 将HTML表数据导出到Excel中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述


我正在尝试将HTML表转换为Excel,我已经尝试使用一个将简单的表转换为Excel的JavaScript函数,它工作正常。如果我有多个表,我将如何将所有表数据添加到Excel文件中。这是我试过的我创建了2个表,并给出了表索引 testTable testTable1

如何点击按钮,我将如何将这两个表格id传递给JavaScript函数?现在点击按钮,只有第一个表导出到Excel,因为我只传递'testTable'。如何导出多个表格,例如: testTable testTable1 到Excel?

How will i pass these 2 table ids to the JavaScript function on click of the button? right now on click of the button only the first table is exported to Excel as I'm passing only 'testTable'. how will i be able to export multiple tables eg: testTable, testTable1 into Excel?

这是JavaScript:

Here's the 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>

这是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>

请让我知道如何做到这一点?

谢谢/ p>

Please let me know, how this can be done?
Thanks

推荐答案

我推荐另一种Format方法。 John Resig微模板是一个非常好的和简单的工具,用于做你所需要的。 ( ejohn microtemplating

I recommend another Format method. the John Resig micro-template is a very good and simple tool for do what you need. (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;
  };
})();

使用起来非常简单。这不仅允许在HTML之间显示变量,还可以执行JavaScript代码

It is very simple to use. This allows not only show variables between HTML but also execute JavaScript code

您的模板字符串需要一些修改才能使用此微模板。

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

你可以看到它的工作原理 http://jsfiddle.net/Scipion/P8rpn/1/

you can see how it works http://jsfiddle.net/Scipion/P8rpn/1/

这篇关于JavaScript - 将HTML表数据导出到Excel中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆