Search code examples
javascriptlaraveltabulator

having troubles with making a multiple html table download using tabulator?


i could manage rendering two tables on one page with tabulator. now i need to export both tables into one excel workbook (different sheets).

i've tried examples provided in the documentation but couldn't achieve success.

included scripts inside head tags

{{-- tabulator links --}}
<link rel="stylesheet" href="css/tabulator/tabulator_simple.css" rel="stylesheet">
<link rel="stylesheet" href="css/tabulator/tabulator_custom.css" rel="stylesheet">
<script src="js/tabulator/tabulator.min.js"></script>

{{-- XLSX Script Includes --}}
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

inside body tags i've put:

<br />
<input class="btn btn-default" type="button" id="download-xlsx" value="Download Excel">
<br />

{{-- tabulator table --}}
<br> table-1 caption <br />
<div id="tableOne" style="margin-top:15px"></div>

<br> table-2 caption <br />
<div id="tableTwo" style="margin-top:15px"></div>

and this is what i've inside script tags

//define data
    var one = {!!$one!!}

    //define table
    var table = new Tabulator("#tableOne", {
        data:one,
        autoColumns:true,
        height:"500px",
        layout:"fitDataFill",
        selectable:true,
        clipboard:true,
    });

    //define data
    var two = {!!$two!!}

    //define table
    var table = new Tabulator("#tableTwo", {
        data:two,
        autoColumns:true,
        height:"500px",
        layout:"fitDataFill",
        // layout:"fitColumns",
        selectable:true,
        clipboard:true,
    });    

    //trigger download of data.xlsx file
    var sheets = {
    "sheetA": "#tableOne",
    "sheetB": "#tableTwo",
    };

    $("#download-xlsx").click(function(){
    table.download("xlsx", "AllData.xlsx", {sheets:sheets});
});

when download button is clicked, excel workbook opens up with 2 sheets. First sheet contains fist table, and that's ok. but second sheet is empty. why so?


Solution

  • Please see this demo you need to put the table variables in the sheets variable whom you want to download create an empty table0 to merge and download them

    var sheets = {
    "Example Data1": table1,
        "Example Data2": table2
    };
    
        downloadXlxs = function(){
    table0.download("xlsx", "data.xlsx", {sheets:sheets});
    };