What is jsPDF Autotable?

jsPDF Autotable is the standard plugin of jsPDF in order to make Tables in jsPDF Library. With the help of this library you can make awesome tables listed below. There are various versions of table you can make, you can even write custom css for the tables which are generated using this library. There are commonly three major table themes which are used in this plugin.

Theme Striped

Theme Grid

Theme Plain

Screenshots

Install

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

You can also get the plugin with a package manager:

bower install jspdf-autotable

npm install jspdf-autotable (only client side usage)

(only client side usage) meteor add jspdf:autotable

Usage

var columns = ["ID", "Name", "Country"]; var rows = [ [1, "Shaw", "Tanzania", ...], [2, "Nelson", "Kazakhstan", ...], [3, "Garcia", "Madagascar", ...], ... ]; var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows); doc.save('table.pdf');

Usage with options

var columns = [ {title: "ID", dataKey: "id"}, {title: "Name", dataKey: "name"}, {title: "Country", dataKey: "country"}, ... ]; var rows = [ {"id": 1, "name": "Shaw", "country": "Tanzania", ...}, {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...}, {"id": 3, "name": "Garcia", "country": "Madagascar", ...}, ... ]; var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: {fillColor: [100, 255, 255]}, columnStyles: { id: {fillColor: 255} }, margin: {top: 60}, beforePageContent: function(data) { doc.text("Header", 40, 30); } }); doc.save('table.pdf');

Options