如何在jspdf應用樣式/佈局

好日子，如何在jspdf應用樣式/佈局

進出口使用jsPDF首次，我覺得這很好的PDF生成器，因爲它速度快，犯規消耗服務器的CPU，但我有一個困難時期在其上添加一些樣式，即使是簡單的文字對齊也不起作用？任何人都可以幫助我這個，或給我一些技巧來操縱它？任何評論/答案/建議真的會被讚賞。

這是我的代碼。

<!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>

這裏是我的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 
) 
}

，它會呈現此PDF： enter image description here

我想要的地址是在同一行，但在我的表格右側並妥善解剖我的桌子，每列有適當的寬度。任何想法請

來源

2014-02-19 melvnberd

也許float屬性不足以將<p>元素並排排列，最好在段落上設置寬度小於容器（父級）元素。

<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>

希望它能幫助：d

參考：http://webdesign.about.com/od/layout/a/aa060101a.htm

來源

2014-02-20 14:01:11

都能跟得上沒有工作！我在jspdf的相同問題上掙扎很多。 –

如何在jspdf應用樣式/佈局

回答

相關問題