jsPdf将页边距添加到pdf页面 [英] jsPdf add margins to pdf page
本文介绍了jsPdf将页边距添加到pdf页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用jsPdf从html创建pdf.如何在我的pdf页面中添加页边距(上，左，右)?
var doc = new jsPDF('p', 'pt', 'letter');
doc.addHTML($('#template_invoice')[0], function () {
...
});
感谢您的帮助！
解决方案
JSPdf允许您进行边距哈希处理并将其应用到您的下载文件中，即
margins = {
top: 40,
bottom: 60,
left: 40,
width: 522
};
请尝试以下代码段或 CodePen :
$(document).ready(function() {
$(".btn").click(function() {
var doc = new jsPDF("p", "pt", "letter"),
source = $("#template_invoice")[0],
margins = {
top: 40,
bottom: 60,
left: 40,
width: 522
};
doc.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
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
doc.save("Test.pdf");
},
margins
);
});
});
.btn-info,
.lead {
margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="template_invoice">
<div class="row">
<div class="col-xs-4">
<div class="invoice-title">
<h2>Invoice</h2>
</div>
</div>
<div class="col-xs-4">
<p class="lead">Order # 12345</p>
</div>
<div class="col-xs-4">
<button class="btn btn-info pull-right">Download</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
John Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Shipped To:</strong><br>
Jane Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Visa ending **** 4242<br>
jsmith@email.com
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
March 7, 2014<br><br>
</address>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>BS-200</td>
<td class="text-center">$10.99</td>
<td class="text-center">1</td>
<td class="text-right">$10.99</td>
</tr>
<tr>
<td>BS-400</td>
<td class="text-center">$20.00</td>
<td class="text-center">3</td>
<td class="text-right">$60.00</td>
</tr>
<tr>
<td>BS-1000</td>
<td class="text-center">$600.00</td>
<td class="text-center">1</td>
<td class="text-right">$600.00</td>
</tr>
<tr>
<td class="thick-line"></td>
<td class="thick-line"></td>
<td class="thick-line text-center"><strong>Subtotal</strong></td>
<td class="thick-line text-right">$670.99</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Shipping</strong></td>
<td class="no-line text-right">$15</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Total</strong></td>
<td class="no-line text-right">$685.99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
I use jsPdf for creating pdf from html. How can I add margings (top, left, right) to my pdf page?
var doc = new jsPDF('p', 'pt', 'letter');
doc.addHTML($('#template_invoice')[0], function () {
...
});
Thanks for any help!
解决方案
JSPdf allows you to make a margin hash and apply it in your download i.e.
margins = {
top: 40,
bottom: 60,
left: 40,
width: 522
};
Try this snippet below or this CodePen:
$(document).ready(function() {
$(".btn").click(function() {
var doc = new jsPDF("p", "pt", "letter"),
source = $("#template_invoice")[0],
margins = {
top: 40,
bottom: 60,
left: 40,
width: 522
};
doc.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
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
doc.save("Test.pdf");
},
margins
);
});
});
.btn-info,
.lead {
margin-top: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="template_invoice">
<div class="row">
<div class="col-xs-4">
<div class="invoice-title">
<h2>Invoice</h2>
</div>
</div>
<div class="col-xs-4">
<p class="lead">Order # 12345</p>
</div>
<div class="col-xs-4">
<button class="btn btn-info pull-right">Download</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
John Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Shipped To:</strong><br>
Jane Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Visa ending **** 4242<br>
jsmith@email.com
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
March 7, 2014<br><br>
</address>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>BS-200</td>
<td class="text-center">$10.99</td>
<td class="text-center">1</td>
<td class="text-right">$10.99</td>
</tr>
<tr>
<td>BS-400</td>
<td class="text-center">$20.00</td>
<td class="text-center">3</td>
<td class="text-right">$60.00</td>
</tr>
<tr>
<td>BS-1000</td>
<td class="text-center">$600.00</td>
<td class="text-center">1</td>
<td class="text-right">$600.00</td>
</tr>
<tr>
<td class="thick-line"></td>
<td class="thick-line"></td>
<td class="thick-line text-center"><strong>Subtotal</strong></td>
<td class="thick-line text-right">$670.99</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Shipping</strong></td>
<td class="no-line text-right">$15</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Total</strong></td>
<td class="no-line text-right">$685.99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
这篇关于jsPdf将页边距添加到pdf页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
