[筆記] jQuery DataTable 輸出 Excel 的設定調整初嘗試 @地瓜大的飛翔旅程

章節連結

需要相關套件
程式碼關鍵解析
程式碼
參考資料

jQuery DataTable 套件搭配上 JZip 和其 Buttons 套件，可以方便輸出 Excel 的 XLSX 格式。這篇筆記下初次嘗試設定一些關於版面排列和設定的東西。

程式碼關鍵解析

運用 customize 參數中，寫進相關的 function 來操作用於解析的 DOM。其中可分為 3 塊：
Update Row – 將既有的 Row 資料，往下平移 X 層。相當於插入 X 條 Row 的意思
Update row > c – 雖說你把版型給調整好了，不過每一個格子 cell 對應的位置也需要跟著做改變
insert – 加入你想要的值，若以 Addrow(1, [{ k: ‘A’, v: ‘ColA’ }, { k: ‘B’, v: ” }) 為例，代表在 A1 插入 ColA, B1 插入空白值
最後將既有的 innerHTML 進行替換就完成了。

若你不想要輸出網頁表頭 (Header) 的話，那要在 exportOptions 中的 format 裡的 header 設置為 null ( 預設為 * )

程式碼

buttons: [{
      extend: 'excelHtml5',
      exportOptions: {
        trim: false,
        stripHtml: false,
        format: {
          header: null
        }
      },
      customize: function (xlsx) {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        var downrows = 3;
        var clRow = $('row', sheet);
        //update Row
        clRow.each(function () {
            var attr = $(this).attr('r');
            var ind = parseInt(attr);
            ind = ind + downrows;
            $(this).attr("r",ind);
        });
 
        // Update  row > c
        $('row c ', sheet).each(function () {
            var attr = $(this).attr('r');
            var pre = attr.substring(0, 1);
            var ind = parseInt(attr.substring(1, attr.length));
            ind = ind + downrows;
            $(this).attr("r", pre + ind);
        });
 
        function Addrow(index,data) {
            msg='<row r="'+index+'">';
            for(i=0;i<data.length;i++){
                var key=data[i].k;
                var value=data[i].v;
                msg += '<c t="inlineStr" r="' + key + index + '" s="42">';
                msg += '<is>';
                msg +=  '<t>'+value+'</t>';
                msg+=  '</is>';
                msg+='</c>';
            }
            msg += '</row>';
            return msg;
        }
 
        //insert
        var r1 = Addrow(1, [{ k: 'A', v: 'ColA' }, { k: 'B', v: '' }, { k: 'C', v: '' }]);
        var r2 = Addrow(2, [{ k: 'A', v: '' }, { k: 'B', v: 'ColB' }, { k: 'C', v: '' }]);
        var r3 = Addrow(3, [{ k: 'A', v: '' }, { k: 'B', v: '' }, { k: 'C', v: 'ColC' }]);
        
        sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ sheet.childNodes[0].childNodes[1].innerHTML;
      }
    }]

buttons: [{

extend: 'excelHtml5',

exportOptions: {

trim: false,

stripHtml: false,

format: {

header: null

}

customize: function (xlsx) {

var sheet = xlsx.xl.worksheets['sheet1.xml'];

var downrows = 3;

var clRow = $('row', sheet);

//update Row

clRow.each(function () {

var attr = $(this).attr('r');

var ind = parseInt(attr);

ind = ind + downrows;

$(this).attr("r",ind);

});

// Update row > c

$('row c ', sheet).each(function () {

var attr = $(this).attr('r');

var pre = attr.substring(0, 1);

var ind = parseInt(attr.substring(1, attr.length));

ind = ind + downrows;

$(this).attr("r", pre + ind);

});

function Addrow(index,data) {

msg='<row r="'+index+'">';

for(i=0;i<data.length;i++){

var key=data[i].k;

var value=data[i].v;

msg += '<c t="inlineStr" r="' + key + index + '" s="42">';

msg += '<is>';

msg += '<t>'+value+'</t>';

msg+= '</is>';

msg+='</c>';

}

msg += '</row>';

return msg;

}

//insert

var r1 = Addrow(1, [{ k: 'A', v: 'ColA' }, { k: 'B', v: '' }, { k: 'C', v: '' }]);

var r2 = Addrow(2, [{ k: 'A', v: '' }, { k: 'B', v: 'ColB' }, { k: 'C', v: '' }]);

var r3 = Addrow(3, [{ k: 'A', v: '' }, { k: 'B', v: '' }, { k: 'C', v: 'ColC' }]);

sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ sheet.childNodes[0].childNodes[1].innerHTML;

}

}]

參考資料

1. Demo 範例：http://live.datatables.net/lizidesu/1/
2. jQuery DataTable HTML5 export buttons

按讚加入粉絲團

需要相關套件

程式碼關鍵解析

程式碼

參考資料

延伸閱讀