Question

我想导出一个基于数据动态生成的HTML表。这是填充数据之前的表格布局。一旦查询了数据，我就会将行填充到表格中。

<table id="findCntrctTable">
    <thead>
        <tr>
            <th>
                Contract <br />
                Number
            </th>
            <th>
                Requestor<br />
                Name
            </th>
            <th>
                Requesting<br />
                Office/District
            </th>
            <th>
                Requested<br />
                Date
            </th>
            <th>
                Contract<br />
                Status
            </th>
            <th>
                Estimated <br />
                Contract Cost
            </th>
            <th>
                Contract <br />
                Type
            </th>
            <th>
                Receivable/
                <br />Payable
            </th>
            <th>
                Contractors
                <br />
            </th>
            <th>
                SP Numbers
                <br />
            </th>    
        </tr>
    </thead>
    <tbody>
    <tr></tr>
    </tbody>
</table>

我有链接将表格导出到Excel

<a href="#" style="cursor: pointer; font-weight:bold; font-style:italic; float:right " onclick=ExportToExcel()>Export to Excel</a>

这是我编写的jquery函数

function ExportToExcel() {
    debugger;
    var a = document.createElement('a');
    var data_type = 'data:application/vnd.ms-excel';
    var table = $('#findCntrctTable');
    //var Header = table.find('th');
    var table_html = table[0].outerHTML.replace(/ /g, '%20');
    a.href = data_type + ', ' + table_html;
    a.download = 'SearchResults.xls';
    a.click();
    //window.open('data:application/vnd.ms-excel,' + encodeURIComponent(table[0].outerHTML));
 }

这是我获取数据后填充表格的方式

    function writetable(data) {         
        var tableOutline = '';          
        for (var i = 0; i < data.length; i++) {
            var id = 'row' + data[i].ContractNumber;
        tableOutline = tableOutline + '<tr id="row_' + data[i].ContractNumber + '" onclick="getCntrctNbr(this,' + data[i].ContractNumber + ')"><td style="text-align:left" ><a>';
        tableOutline = tableOutline + data[i].ContractNumber + '</a></td><td>' + data[i].RequestorName + '</td><td>' + data[i].RequestingOffDisct + '</td><td style="text-align:right">' + formatJSONDate(data[i].RequestedDate) + '</td><td>' + data[i].ContractStatus + '</td><td style="text-align:right">' + formatCurrency(data[i].EstimateContractCost) + '</td><td>' + data[i].ContractType + '</td><td>' + data[i].PayReceivable + '</td><td>' + data[i].ControrList + '</td><td>' + data[i].SPList + '</td></tr>';
        }
            tableOutline = tableOutline;
            $('#findCntrctTable').append(tableOutline);
            $('#findCntrctTable').show();

        }

导出到Excel时，标题字段未显示在电子表格中。能帮到我解决这个问题吗？提前致谢

Answer 1

在玩了一下代码后，我想出了以下内容：

<table id="findCntrctTable">
<thead>
    <tr>
        <th>Contract
            <br />Number</th>
        <th>Requestor
            <br />Name</th>
        <th>Requesting
            <br />Office/District</th>
        <th>Requested
            <br />Date</th>
        <th>Contract
            <br />Status</th>
        <th>Estimated
            <br />Contract Cost</th>
        <th>Contract
            <br />Type</th>
        <th>Receivable/
            <br />Payable</th>
        <th>Contractors
            <br />
        </th>
        <th>SP Numbers
            <br />
        </th>
    </tr>
</thead>
<tbody>
    <tr></tr>
</tbody>

 <a id="exportToExcel" href="#" style="cursor: pointer; font-weight:bold; font-style:italic; float:right">Export to Excel</a>

 $('#exportToExcel').on('click', function() {
    var a = document.createElement('a');
    var data_type = 'data:application/vnd.ms-excel';
    var table = $('#findCntrctTable');
    var Header = table.find('th');
    var table_html = table[0].outerHTML.replace(/" "/g, '%20');

    a.href = data_type + ', ' + table_html;
    a.download = 'SearchResults.xls';
    a.click();
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(table[0].outerHTML));
});

当然，html中存在一些丑陋的格式，但我能够导出表头。

JsFiddle

Answer 2

不知何故，有2个表创建一个用于标题，一个表用于包含数据的行。这就是表findHntrctTable的outerhtml没有任何标题的原因。

我在这里手动添加了标题

 $('#exportToExcel').on('click', function () {
        debugger;
        var a = document.createElement('a');
        var data_type = 'data:application/vnd.ms-excel';
        var table = $('#findCntrctTable');
        // var Header = table.find('th');
        var table_html = '<table> <thead><tr><th>Contract Number</th><th>Requestor Name</th><th>Requesting Office/District</th><th>Requested Date</th><th>Contract Status</th><th>Estimated Contract Cost</th><th>Contract Type</th><th>Receivable/Payable</th><th>Contractors</th><th>SP Numbers</th></tr></thead></table>';
        table_html = table_html + table[0].outerHTML.replace(/ /g, '%20');
        a.href = data_type + ', ' + table_html;
        a.download = 'MnDOTContractsList.xls';
        a.click();
       // window.open('data:application/vnd.ms-excel,' + encodeURIComponent(table[0].outerHTML));
    });

这很完美！

从HTML表导出到Excel Jquery不导出表的标题

2 个答案: