Skip to content

Instantly share code, notes, and snippets.

@AbiPineda

AbiPineda/datatables-custom-pdf.markdown

Created December 22, 2020 21:56
Show Gist options
  • Save AbiPineda/a90e7a846aee1c5a15a21220cf583ea9 to your computer and use it in GitHub Desktop.
Save AbiPineda/a90e7a846aee1c5a15a21220cf583ea9 to your computer and use it in GitHub Desktop.
Download ZIP
dataTables custom PDF
Raw
datatables-custom-pdf.markdown

dataTables custom PDF

Example of how to insert a header, footer, page numbers and image logo to a PDF export with dataTables.

A Pen by Dirk Drijkoningen on CodePen.

License.

Raw
index.html
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>Description</th>
<th>Deadline</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alphabet puzzle</td>
<td>2016/01/15</td>
<td>Done</td>
<td data-order="1000">€1.000,00</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">€1.834,00</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">€1.500,00</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">€1.200,00</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">€2.100,00</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">€899,00</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">€2.499,00</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">€1.099,00</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">€1.750,00</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">€400,00</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">€299,00</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">€149,00</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">€199,00</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">€4.999,00</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">€1.399,00</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">€1.000,00</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">€1.834,00</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">€1.550,00</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">€1.220,00</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">€2.100,00</td>
</tr>
<tr>
<td>21</td>
<td>Poster rock concert</td>
<td>2017/04/17</td>
<td>To Do</td>
<td data-order="899">€899,00</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">€2.799,00</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">€1.299,00</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">€1.650,00</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">€510,00</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">€399,00</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">€249,00</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">€199,00</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">€1.999,00</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">€1.369,00</td>
</tr>
<tr>
<td>1</td>
<td>Alphabet puzzle</td>
<td>2016/01/15</td>
<td>Done</td>
<td data-order="1000">€1.000,00</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">€1.834,00</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">€1.500,00</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">€1.200,00</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">€2.100,00</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">€899,00</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">€2.499,00</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">€1.099,00</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">€1.750,00</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">€400,00</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">€299,00</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">€149,00</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">€199,00</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">€4.999,00</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">€1.399,00</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">€1.000,00</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">€1.834,00</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">€1.550,00</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">€1.220,00</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">€2.100,00</td>
</tr>
<tr>
<td>21</td>
<td>Poster rock concert</td>
<td>2017/04/17</td>
<td>To Do</td>
<td data-order="899">€899,00</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">€2.799,00</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">€1.299,00</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">€1.650,00</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">€510,00</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">€399,00</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">€249,00</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">€199,00</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">€1.999,00</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">€1.369,00</td>
</tr>
</tbody>
</table>
Raw
script.js
$(document).ready(function() {
// Function to convert an img URL to data URL
function getBase64FromImageUrl(url) {
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
};
img.src = url;
}
// DataTable initialisation
$('#example').DataTable(
{
"dom": '<"dt-buttons"Bf><"clear">lirtp',
"paging": true,
"autoWidth": true,
"buttons": [
{
text: 'Custom PDF',
extend: 'pdfHtml5',
filename: 'dt_custom_pdf',
orientation: 'landscape', //portrait
pageSize: 'A4', //A3 , A5 , A6 , legal , letter
exportOptions: {
columns: ':visible',
search: 'applied',
order: 'applied'
},
customize: function (doc) {
//Remove the title created by datatTables
doc.content.splice(0,1);
//Create a date string that we use in the footer. Format is dd-mm-yyyy
var now = new Date();
var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();
// Logo converted to base64
// var logo = getBase64FromImageUrl('https://datatables.net/media/images/logo.png');
// The above call should work, but not when called from codepen.io
// So we use a online converter and paste the string in.
// Done on http://codebeautify.org/image-to-base64-converter
// It's a LONG string scroll down to see the rest of the code !!!
var logo = 'data:image/jpeg;base64,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ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA=';
// A documentation reference can be found at
// https://github.com/bpampuch/pdfmake#getting-started
// Set page margins [left,top,right,bottom] or [horizontal,vertical]
// or one number for equal spread
// It's important to create enough space at the top for a header !!!
doc.pageMargins = [20,60,20,30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 7;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 7;
// Create a header object with 3 columns
// Left side: Logo
// Middle: brandname
// Right side: A document title
doc['header']=(function() {
return {
columns: [
{
image: logo,
width: 24
},
{
alignment: 'left',
italics: true,
text: 'dataTables',
fontSize: 18,
margin: [10,0]
},
{
alignment: 'right',
fontSize: 14,
text: 'Custom PDF export with dataTables'
}
],
margin: 20
}
});
// Create a footer object with 2 columns
// Left side: report creation date
// Right side: current page and total pages
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Created on: ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
}
],
margin: 20
}
});
// Change dataTable layout (Table styling)
// To use predefined layouts uncomment the line below and comment the custom lines below
// doc.content[0].layout = 'lightHorizontalLines'; // noBorders , headerLineOnly
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .5; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 4; };
objLayout['paddingRight'] = function(i) { return 4; };
doc.content[0].layout = objLayout;
}
}]
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/vfs_fonts.js"></script>
Raw
style.css
body {margin:2em;}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment