使用jspdf對齊表中列的文本
[英]Alignment of text of a column in a table using jspdf
問題描述
我使用jspdf將html表導出為pdf。我正在嘗試格式化表格。 我能夠調整邊距。 我想將幾列表格右對齊，少數左對齊。 在表格中，我希望第一列與左對齊，最后一列與右對齊。
<!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 dataTable table-responsive">
<thead>
<tr role="row"> <%--class="headerRow"--%>
<th role="columnheader" class="col-lg-2">Account</th>
<th role="columnheader" class="col-lg-3">Description</th>
<th role="columnheader" class="col-lg-3">Journal Entry#</th>
<th role="columnheader" class="col-lg-2">Debit</th>
<th role="columnheader" class="col-lg-2">Credit</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>
這是javascript文件
<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>
2 個解決方案
解決方案1
1 2014-12-11 10:03:09
好的解決方案是將表拆分為不同的表，並將其與jspdf.plugin.htmltable.js對齊。 希望它能幫助你
解決方案2
1 2014-12-12 12:21:57
更好的解決方案是將jspdf.plugin.htmltable.js修改為swith cell.align。 並在html表格的單元格中添加對齊。
switch (options.align || cell.align) {
case '-webkit-right':
case 'right':
if (!(txt instanceof Array)) {
txt = [txt];
}
for (i = 0; i < txt.length; i++) {
var textSize = this.getStringUnitWidth(txt[i]) * this.internal.getFontSize();
this.text(txt[i], cursor.x + cell_widths[x] - textSize - padding, cursor.y + this.internal.getLineHeight()*(i+1));
}
break;
JSPDF表格在角度2中對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.