gpt4 book ai didi

javascript - 使用jspdf对齐表格中列的文本

转载 作者:可可西里 更新时间:2023-11-01 13:33:21 26 4
gpt4 key购买 nike

我使用 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>

最佳答案

好的,解决方案是将您的表格按列拆分为不同的表格,并将其与 jspdf.plugin.htmltable.js 对齐。希望对你有帮助

关于javascript - 使用jspdf对齐表格中列的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23936595/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com