Я использую jsPdf для создания pdf из html. Как я могу добавить поля (сверху, слева, справа) на мою страницу PDF?
var doc = new jsPDF('p', 'pt', 'letter');
doc.addHTML($('#template_invoice')[0], function () {
...
});
Спасибо за любую помощь!
Используя JSPDF, я обнаружил несколько ограничений. fromHTML() больше не поддерживается, а html() является текущим методом, который мы можем вызывать из экземпляра, более того, для него margin также не поддерживается, поскольку html() использует первый элемент в качестве обратного вызова.
import React from 'react'
import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF({ orientation: 'landscape', unit: 'pt' })
const PDFDownload = ({ scenario }) => {
function showPDF () {
window.html2canvas = html2canvas
try {
const gameFeedback = document.querySelector('.game-feedback')
doc.setFontSize(12)
doc.html(gameFeedback, {
callback: function (doc) {
doc.save(`${scenario.name}.pdf`)
}
})
} catch (err) {
console.error(err)
}
}
return (
<button className='btn btn-primary' type='submit' onClick={showPDF}><i className='fas fa-file-download' /> PDF</button>
)
}
export default PDFDownload
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>
[email protected]
</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>var margins = { top: 100, bottom: 60, left: 100, width: 522 }; var doc = new jsPDF('p', 'pt', 'letter'); doc.addHTML($('#template_invoice')[0], margins.left, margins.top, { width: margins.width }, function () { var pdf = doc.output('blob'); .... }, margins);
- person Ololo Ololo; 02.09.2017
