Export table as PDF for printing

I have recently managed to export table data from tabulator into a PDF file which then allows easy printing of the table in a nice format. I thought I would share how I achieved this for the benefit of other users:

1. You will need to download the latest versions of jsPDF and jsPDF-AutoTable, available from here and here respectively

2. Load the two scripts before your closing body tag as usual e.g.

<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.plugin.autotable.min.js"></script> 

1. In the HTML of your web page add a div <div id="html-table"></div> and then in your CSS hide this div e.g.

#html-table {
	display: none;
}

1. create a PRINT button on your webpage as an event handler which exports the data in tabulator as an HTML table, appends this table to the div we created above, converts the table data into an array that can be used by jspdf via the autotable plugin and then creates/saves a pdf file which can be opened and printed as follows:

$('#printbutton').click(function() {
    $('#html-table table').remove(); //removes any previously generated html table from the div
    var table = $("#example-table").tabulator("getHtml", "true"); //true option preserves current sort 
    $('#html-table').append(table);
    $('#html-table>table').attr("id", "table");
    var elem = $("#table");
    var doc = new jsPDF('l', 'pt'); //set document to landscape, better for most tables
    var res = doc.autoTableHtmlToJson(elem);
    doc.autoTable(res.columns, res.data, { 
          *additional autotable options go in here - see website for details*
    })
    doc.save('myPDF.pdf');
  });

There is a huge range of options which can be added for styling of the generated PDF table, adding titles, headers/footers and page numbers to the PDF document - there are lots of examples on the autotable website but you will have to dig into the source code of the examples page to work them out as the documentation for both plugins leaves a lot to be desired!

Please let me know if you think this is useful?

[olifolkerd]

Hey @AadBr

Thanks for the extensive testing, it is really useful to get feedback from the user base on new features!

In response to your feedback:

• the hideInHtml is only used on the getHTML function, as this is a download you should use download:false instead
• columnStyles, I haven’t really experimented with the style options of the autoTable extension i will need to look into that further to see if that is an issue with the way the data is sent or with autoTable itself
• Grouping is currently ignored in all downloads, it will be coming in a future update
• at the moment the addPageContent function wont work because of the way that it needs access to the document object and there is no way to pass what it to the config object outside the download function. i will look at adding an additional parameter for this in the next release that passes it into the function.
• you would be able to add the images in by using a download accessor with the new accessorDownload column definition option that has come in with v3.5

Once again, thanks for the info, i have already added a couple of items to the roadmap for the next release as a result.

Please feel free to have a play with the resto of the release and let me know of your thoughts for the rest of it.

Cheers

Oli 😃

[AadBr]

Hi, Great library Oli, well documented!

What worked for me was:

• use <script src="js/jspdf.debug.js"></script> instead of <script src="js/jspdf.min.js"></script>
• replace example-table in var table = $(“#example-table”).tabulator(“getHtml”, “true”); with html-table which replaces the div table structure.
• change var res = doc.autoTableHtmlToJson(elem) to: var res = doc.autoTableHtmlToJson(elem[0]);

Thanks, Aad