你好，
我是第一次使用 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>
这是我的代码:
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:
我希望地址在同一行但在我的表单的右侧，并适本地剖析我的表格以使每列具有适当的宽度。任何想法请
最佳答案
也许是 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
关于javascript - 如何在 jspdf 上应用样式/布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21886334/