how to apply style/layout on jspdf
Maybe the float
attribute is not enought to align the <p>
elements side by side, it's best to set a width on the paragraph that's smaller than the container (parent) element.
<div>
<h1>INVOICE No. 1</h1>
<p style="float:left; width:150px;">Doe, John A</p>
<p style="float:right; width:150px;">Oklahoma city</p>
</div>
Hope it helps :D
Reference: http://webdesign.about.com/od/layout/a/aa060101a.htm
melvnberd
Updated on July 09, 2022Comments
-
melvnberd almost 2 years
Good day,
Im using jsPDF for the first time, and I find it good pdf generator because it was fast and doesnt consume server's CPU, but I am having a hard time on adding some style on it, even a simple text alingment doesnt work? Can anyone please help me with this one, or give me some tips to manipulate it? Any comment/answers/advice would really be appreciated.
here is my code.
<!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 style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;" id="fromHTMLtestdiv"> <div> <h1>INVOICE No. 1</h1> <p style="float:left">Doe, John A</p> <p style="float:right">Oklahoma city</p> </div> <table> <colgroup> <col width="10%"> <col width="30%"> <col width="40%"> <col width="10%"> <col width="10%"> </colgroup> <thead> <tr> <th>id</th> <th>item name</th> <th>description</th> <th>price</th> <th>qty</th> <th>subtotal</th> </tr> </thead> <tbody> @foreach ($items as $item => $value) <tr> <td>{{$value->itemId}}</td> <td>{{$value->itemName}}</td> <td>{{$value->description}}</td> <td>{{$value->itemPrice}}</td> <td>{{$value->quantity}}</td> <td>{{$value->quantity*$value->itemPrice}}</td> </tr> @endforeach </tbody> </table> </div> <div> <button onclick="javascript:demoFromHTML()" class="button">Run Code</button></p></div> </div> </div> </div> <h1></h1> <script> $(document).ready(function() { //demoFromHTML(); }); </script> </body> <footer> </footer> </html>
here is my js:
function demoFromHTML() { var pdf = new jsPDF('p', 'pt', 'letter') // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. , source = $('#fromHTMLtestdiv')[0] // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. , specialElementHandlers = { // element with id of "bypass" - jQuery style selector '#bypassme': function(element, renderer){ // true = "handled elsewhere, bypass text extraction" return true } } margins = { top: 80, bottom: 60, left: 40, width: 522 }; // all coords and widths are in jsPDF instance's declared units // 'inches' in this case 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) { // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html pdf.save('Test.pdf'); }, margins ) }
and it will render this pdf:
I want the address to be on the same line but on the right side of my form and properly dissect my table to have a proper width every column. Any ideas please