CODEWITHSUNDEEP
javascriptjquery
GavinBelson
GavinBelson

Reputation: 2794

Exporting HTML table on click

I am trying to export an HTML table on a click of a link.

Using the https://tableexport.v5.travismclarke.com/ but open to suggestions

When I have the following link, it generates a working button to export the table. (If I set the exportButtons to false it will not generate a button.)

<a href="#" onclick="$('#initial_analysis').tableExport({formats: ['xlsx'], exportButtons: true});"> Generate Export</a>

However, I need this link to actually generate the export instead of a button. How can I achieve that?

Upvotes: 0

Views: 1548

Answers (1)

PierreN
PierreN

Reputation: 988

This library seems more to be "button generator" than an export library : we see that for exporting it needs a third-party library xlsx.core.js by SheetJS (see "addons" section)

I would suggest you to use directly sheetjs, you'll have more control on the export.

You can see working code i've answered a few days ago on this link : Convert HTML table to Excel file in pure JavaScript using sheets.js plugin

Anyway, if you want to continue using this export button generator library, you can do like this :

  • when we click on the current link, it generates the button
  • you can add on the current onClick the following code setTimeout(function(){ click_on_the_generated_button() }, 500); that will click on the newly generated button...

So you could do like this 

<a href="#" onclick="$('#initial_analysis').tableExport({formats: ['xlsx'], exportButtons: true}); setTimeout(function(){ click_on_the_generated_button() }, 500);"> Generate Export</a>

Otherwise, if you're interested to switch to the main library SheetJS generating the xlsx, here is a sample SheetJS code for exporting HTML to xlsx : 

<script type="text/javascript" src="//unpkg.com/xlsx/dist/shim.min.js"></script>
<script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

<script type="text/javascript" src="//unpkg.com/[email protected]/Blob.js"></script>
<script type="text/javascript" src="//unpkg.com/[email protected]/FileSaver.js"></script>


<div id="container2">
  <title>SheetJS Table Export</title>
  <table id="data-table">
    <tr>
      <td>ID</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Johnny</td>
    </tr>
  </table>
</div>
<p id="xportxlsx" class="xport"><input type="submit" value="Export to XLSX!" onclick="doit('xlsx');"></p>


<script type="text/javascript">

function doit(type, fn, dl) {
    var elt = document.getElementById('data-table');
    var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
    return dl ?
        XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
        XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
}


function tableau(pid, iid, fmt, ofile) {
    if(typeof Downloadify !== 'undefined') Downloadify.create(pid,{
            swf: 'downloadify.swf',
            downloadImage: 'download.png',
            width: 100,
            height: 30,
            filename: ofile, data: function() { return doit(fmt, ofile, true); },
            transparent: false,
            append: false,
            dataType: 'base64',
            onComplete: function(){ alert('Your File Has Been Saved!'); },
            onCancel: function(){ alert('You have cancelled the saving of this file.'); },
            onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); }
    });
}
tableau('xlsxbtn',  'xportxlsx',  'xlsx',  'test.xlsx');

</script>

Upvotes: 1

Related Questions