如何将多个html表格导出到excel？答案

【问题标题】：How do I export multiple html tables to excel?如何将多个html表格导出到excel？
【发布时间】：2014-08-29 11:48:03
【问题描述】：

我有一个包含 3 个表格的网页，我想将所有 3 个表格导出到同一个 excel 文件中。我希望每张桌子都放在自己的工作表中，但也可以将它们全部放在同一张工作表上。经过一番谷歌搜索，我所看到的只是将一张表导出到一张 excel 表中。

【问题讨论】：

你想怎么做？用什么语言？在什么环境下？到目前为止，您自己为此付出了多少努力？你有足够的徽章和代表来了解规则。
您使用什么编程语言？只有 HTML 和 Javascript？
@alex.pulver 我正在使用 ASP.NET 网页。但我只想在 HTML 和 Javascript 中做到这一点。
如果您改变主意，请告诉我。据我所知，您只能保存扩展名为 xls 的 html 文件。它不是真正的 xls 文件，您不能拥有多个实际上是 html 表格的工作表。
你试过excelbuilderjs.com 吗？它能够将多个工作表打包到一个工作簿中，并且不需要后端（尽管如果您没有后端来将文件从其中反弹，则您需要类似 downloadify 的东西才能将文件发送给用户）。

标签： javascript html excel html-table export-to-excel

【解决方案1】：

Here 是一个更好的解决方案，它支持以最新的 Excel 格式（即 xlsx）导出表格 .如果在 Chrome 上导出的总行数超过 3407，则接受的解决方案将失败。

上面链接中的一个例子： http://jsfiddle.net/6ckj281f/

html

<button onclick="saveFile()">Save XLSX file</button>

javascript

window.saveFile = function saveFile () {
var data1 = [{a:1,b:10},{a:2,b:20}];
var data2 = [{a:100,b:10},{a:200,b:20}];
var opts = [{sheetid:'One',header:true},{sheetid:'Two',header:false}];
var res = alasql('SELECT INTO XLSX("restest344b.xlsx",?) FROM ?',
                 [opts,[data1,data2]]);
}

【讨论】：

【解决方案2】：

//函数1

     $scope.exportXlsSheets = function (datasets) {

            var xlsString = '<?xml version="1.0"?>\
            <ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">';        
            for(var key in dict){
                var arr_of_entities=  dict[key].arr;
                xlsString += $scope.getSheet(arr_of_entities);
            }
            xlsString += '</ss:Workbook>';
            var a = document.createElement('a');
            a.href = 'data:application/vnd.ms-excel;base64,' + $scope.base64(xlsString);
            a.target = '_blank';
            a.download = 'test1.xls';

            document.body.appendChild(a);
            a.click();
        }
        $scope.base64 = function (s) {
            return window.btoa(unescape(encodeURIComponent(s)))
        }

//函数2

  $scope.getSheet = function (sheetName, entities) {

        var res = '<ss:Worksheet ss:Name="'+sheetName+"></ss:Worksheet>\
                   <ss:Table>';

             var row = '<ss:Row>';
            for ( i = 0; i < entities.length; i++) {
              var entity = entities[i];


                   row += '<ss:Cell>\
                            <ss:Data ss:Type="String">'+entity.value +'</ss:Data>\
                        </ss:Cell>';
            }
            row += '</ss:Row>';
           res += row;

        return res;
    }

【讨论】：

它是有角度的，但没关系。
这个答案为我指明了正确的方向。它支持将数据放在不同的工作表上。它输出 SpreadsheetML 而不是 HTML。此答案中的更多信息：stackoverflow.com/a/150368/373981
@Ehud 你能给个jsfiddle吗？很容易理解datasets 以哪种格式传递

【解决方案3】：

var tablesToExcel = (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>'
    , templateend = '</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>'
    , body = '<body>'
    , tablevar = '<table>{table'
    , tablevarend = '}</table>'
    , bodyend = '</body></html>'
    , worksheet = '<x:ExcelWorksheet><x:Name>'
    , worksheetend = '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>'
    , worksheetvar = '{worksheet'
    , worksheetvarend = '}'
    , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    , wstemplate = ''
    , tabletemplate = '';

    return function (table, name, filename) {
        var tables = table;

        for (var i = 0; i < tables.length; ++i) {
            wstemplate += worksheet + worksheetvar + i + worksheetvarend + worksheetend;
            tabletemplate += tablevar + i + tablevarend;
        }

        var allTemplate = template + wstemplate + templateend;
        var allWorksheet = body + tabletemplate + bodyend;
        var allOfIt = allTemplate + allWorksheet;

        var ctx = {};
        for (var j = 0; j < tables.length; ++j) {
            ctx['worksheet' + j] = name[j];
        }

        for (var k = 0; k < tables.length; ++k) {
            var exceltable;
            if (!tables[k].nodeType) exceltable = document.getElementById(tables[k]);
            ctx['table' + k] = exceltable.innerHTML;
        }

        //document.getElementById("dlink").href = uri + base64(format(template, ctx));
        //document.getElementById("dlink").download = filename;
        //document.getElementById("dlink").click();

        window.location.href = uri + base64(format(allOfIt, ctx));

    }
})();

还有 HTML

<html>
    <head>
        <title>JS to Excel</title>

    </head>
    <body>
        <table id="1">
            <tr><td>Hi</td></tr>
            <tr><td>Hey</td></tr>
            <tr><td>Hello</td></tr>
        </table>
        <table id="2">
            <tr><td>Night</td></tr>
            <tr><td>Evening</td></tr>
            <tr><td>Nite</td></tr>
        </table>

        <a id="dlink"  style="display:none;"></a>
        <input type="button" onclick="tablesToExcel(['1', '2'], ['first', 'second'], 'myfile.xls')" value="Export to Excel">
        <script src="~/Views/JS/JSExcel.js" type="text/javascript"></script>
    </body>
</html>

注意：这在 IE（“数据太小”错误）和 Firefox 上不起作用，两个表都放在同一张表上。

感谢此线程 - HTML Table to Excel Javascript

【讨论】：

我发现这在使用多张纸时效果不佳。就我而言，stackoverflow.com/questions/29698796/… 效果很好。应该注意的一件事是工作表名称中的“/”字符。
此代码出现此错误元素“x:ExcelWorksheet”的前缀“x”未绑定。
我试过了，两个标签都是在excel中创建的，但是第一个标签有两个表的数据，第二个标签是空的
满足我的需求 github.com/hhurz/tableExport.jquery.plugin 做得很好