I utilized jspdf to export an HTML table into a PDF. My goal is to format the table by aligning specific columns to the right and others to the left. Specifically, I want the first column to be aligned to the left and the last column to the right.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
{{ HTML::script("js/jspdf/js/jquery/jquery-1.7.1.min.js")}}
{{ HTML::script("js/jspdf/js/jquery/jquery-ui-1.8.17.custom.min.js")}}
{{ HTML::script("js/jspdf/js/libs/polyfill.js")}}
{{ HTML::script("js/jspdf/jspdf.js")}}
{{ HTML::script("js/jspdf/js/libs/deflate.js")}}
{{ HTML::script("js/jspdf/js/libs/adler32cs.js/adler32cs.js")}}
{{ HTML::script("js/jspdf/js/libs/FileSaver.js/FileSaver.js")}}
{{ HTML::script("js/jspdf/js/libs/Blob.js/Blob.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.standard_fonts_metrics.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.split_text_to_size.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.addimage.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.cell.js")}}
{{ HTML::script("js/jspdf/jspdf.plugin.from_html.js")}}
{{ HTML::script("js/jspdf/js/basic-test.js")}}
</head>
<body>
<div id="tblSaveAsPdf" class="table-details margin-top-small collapse" style="display: none; margin-top: -10em;">
<table class="table table-bordered table-striped table-hover bootstrap-datatable dataTable table-responsive">
<thead>
<tr role="row"> <%--class="headerRow"--%>
<th role="columnheader" class="col-lg-2"></th>
<th role="columnheader" class="col-lg-3"></th>
<th role="columnheader" class="col-lg-3"></th>
<th role="columnheader" class="col-lg-2"></th>
<th role="columnheader" class="col-lg-2"></th>
</tr>
</thead>
<tfoot>
<tr role="row">
<td style="text-align: center">
<span>TOTAL</span>
</td>
<td></td>
<td></td>
<td style="text-align: right">
<span data-bind="text: pp_formattedDebitTotal"></span>
</td>
<td style="text-align: right">
<span data-bind="text: pp_formattedCreditTotal"></span>
</td>
</tr>
</tfoot>
<tbody data-bind="foreach: pp_voidCheckGLSummarys">
<tr >
<td>
<span data-bind="text: pp_account"></span>
</td>
<td >
<span data-bind="text: pp_accountName"></span>
</td>
<td>
<span data-bind="text: pp_entry"></span>
</td>
<td>
<span data-bind="text: pp_amountDebit"></span>
</td>
<td>
<span data-bind="text: pp_amountCredit"></span>
</td>
</tr>
</table>
</div>
</tbody>
<div>
<button onclick="demoFromHTML()" class="button">SAvePDF</button></p></div></div>
</div>
Below is the JavaScript code:
<script>
$(document).ready(function() {
demoFromHTML();
});
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#tblSaveAsPdf')[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true;
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
}
</script>