我将这些版本用于JSPDF:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
我的页面上有很大的div,例如:
<div id="template_invoice">
<div id="first_head">
<div id="logo_invoice" class="has-65">
<img src="" width="280px">
</div>
<div id="main_header_info" class="has-35">
</div>
</div>
<div class="clearFix"></div>
<div id="second_head">
<div id="lead_address" class="has-65">
<span id="lead_name"></span><br>
<span id="lead_street"></span><br>
<span id="lead_postcode_city"></span><br>
</div>
<div id="lead_invoice_info" class="has-35">
<div class="span_padding_invoice">
<span class="invoice_main_span">Rechnungs-Nr.</span>
<span id="lead_rechnungs_nr" class="right-clmn-span"></span>
<br>
...
</div>
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span total_bold">Total</span>
<span id="lead_total" class="right-clmn-span"></span>
<br>
</div>
</div>
</div>
<div id="content_invoice">
<div id="rechnung_div">
<h1>Rechnung</h1>
<p>Rechnungs-Nr. <span id="rechnung_nr"></span> / Kunden-Nr. <span id="kunder_nr"></span> </p>
</div>
<table id="product_invoice_table" width="100%">
<thead>
<tr>
<th width="55%">Produkt</th>
<th width="15%">Menge</th>
<th width="15%">Preis / Einheit</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="clearFix"></div>
<div id="footer_invoice">
</div>
</div>
所以我使用以下代码生成PDF文件:
var doc = new jsPDF('p', 'pt', 'a4');
doc.addHTML($('#template_invoice')[0], function () { var pdf = doc.output('blob'); .... });
都可以正常工作,但是如果cotent的高度较大,则页面没有第二页。其他页面。我尝试使用PagesPlit:是的,但是它奏效了,但是没有正确的字体,CSS,而不是2页,我得到了4页,错误的CSS。
我需要任何帮助来解决此问题,我如何为DIV设置多个页面?
非常感谢您的帮助!
现在,我使用PagesPlt标志获得了这样的PDF:http://clip2net.com/s/3obsvzc
您应该能够选择一个与创建PDF这样的页面格式足够接近的页面格式。生成文件
时尝试以下行var pdf = new jsPDF("l", "pt", "letter");