如何在点击导出表格中禁用javascript到excel?

时间:2015-04-11 17:47:42

标签: javascript jquery html excel

我有一个包含db:

变量的表
<table id="itemall2" class="itemall" border="1">
        <thead>
            <tr><th></th>
            <th><?= $lang['quantity']; ?></th>
            <th><?= $lang['article']; ?></th>
            <th><?= $lang['desc']; ?></th>
            <th><?= $lang['weight']; ?> (Kg)</th>
            <th><?= $lang['price']; ?> (Kč)</th>
            <th><?= $lang['cat_id']; ?></th>
            <th><?= $lang['cat_name']; ?></th></tr>
        </thead>
        <tbody>
        <?php foreach ($this->items as $value) : ?>
            <tr><td><input type="checkbox" name="checked[]" value="<?= $value['id_item']?>" onclick="enableName(this, 'quantity<?= $value['id_item']?>');"/></td>
                <td><input type="number" class="quantity<?= $value['id_item']?>" name="quantity[]" disabled></td>
                <td><?= $value['id_item']?></td>
                <td><?= $value[$en] ?></td>
                <td><?= $value['weight'] ?></td>
                <td><?= $value['price'] ?></td>
                <td><?= $value['code'] ?></td>
                <td><?= $value['name'] ?></td>
            </tr>
        <?php endforeach; ?>

            <input type="hidden" name="id_warehouse" type="text" value="<?= $this->id_warehouse ?>">
        </tbody>
    </table>

我有一个按钮,点击后将表格转换为Excel格式并将其保存到磁盘:

<input type="button" onclick="tableToExcel('itemall2', 'W3C Example Table')" value="<?= $lang['export']; ?>">

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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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))
      }
    })();

问题是,使用此函数将表中的某些单元格与rowspans和colspans合并在一起:

function MergeCommonRows(table) {
    var firstColumnBrakes = [];
    // iterate through the columns instead of passing each column as function parameter:
    for(var i=1; i<=table.find('th').length; i++){
        var previous = null, cellToExtend = null, rowspan = 1;
        table.find("td:nth-child(" + i + ")").each(function(index, e){
            var jthis = $(this), content = jthis.text();
            // check if current row "break" exist in the array. If not, then extend rowspan:
            if (previous == content && content !== "" && $.inArray(index, firstColumnBrakes) === -1) {
                // hide the row instead of remove(), so the DOM index won't "move" inside loop.
                jthis.addClass('hidden');
                cellToExtend.attr("rowspan", (rowspan = rowspan+1));
            }else{
                // store row breaks only for the first column:
                if(i === 1) firstColumnBrakes.push(index);
                rowspan = 1;
                previous = content;
                cellToExtend = jthis;
            }
        });
    }
    // now remove hidden td's (or leave them hidden if you wish):
    $('td.hidden').hide();
    }

因为我没有使用remove()从表中删除重复单元格,但是我用hide()隐藏了它们,导出的表格被破坏了。它正确导出合并的单元格,但它也会打印完全打破表格的隐藏单元格。我无法删除()单元格,因为我将它们用于其他事情,所以有没有办法告诉导出脚本导出表格,因为它没有合并?

2 个答案:

答案 0 :(得分:1)

您可以像这样修改tableToExcel函数

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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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);
    // clone the table
    var modifiedTable = $('<table/>').html(table.innerHTML);
    // remove elements from the clone
    modifiedTable.find('.hidden').remove();
    // get the modified html
    var ctx = {worksheet: name || 'Worksheet', table: modifiedTable.html()}
    window.location.href = uri + base64(format(template, ctx))
  }
})();

克隆并删除样本https://jsfiddle.net/yqwk2d0a/

这不会修改原始表

答案 1 :(得分:0)

这是jQuery方式做同样的事情,Crisim II Numenoreano做了+感谢他为我用来测试下面的代码的小提琴:

var clonedTable = $('#test').clone();

clonedTable.find('.hidden').remove();

Fiddle