Scribd
Upload
4 views

pdf generate v2

The document is an HTML template for generating a PDF invoice using the html2pdf.js library. It includes invoice details such as invoice number, creation and due dates, billing information, payment method, itemized charges, and the total amount due. A button is provided to trigger the PDF generation from the specified content in the HTML.

Uploaded by

starasia
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

pdf generate v2

The document is an HTML template for generating a PDF invoice using the html2pdf.js library. It includes invoice details such as invoice number, creation and due dates, billing information, payment method, itemized charges, and the total amount due. A button is provided to trigger the PDF generation from the specified content in the HTML.

Uploaded by

starasia
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.
js"></script>
<script>
function generatePDF() {
const element = document.getElementById('container_content');
var opt = {
margin: 1,
filename: 'html2pdf_example.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter',
orientation: 'portrait' }
};
// Choose the element that our invoice is rendered in.
html2pdf().set(opt).from(element).save();
}
</script>
</head>
<body>
<div class="text-center" style="padding:20px;"></div>
<button onclick="generatePDF()">Generate PDF using
HTML2PDF</button>
</div>
<div class="container_content" id="container_content" >

<div class="invoice-box">

<table cellpadding="0" cellspacing="0" >


<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>

<td>
Invoice #: INV38379<br />
Created: January 1, 2022<br />
Due: February 1, 2022
</td>
</tr>
</table>
</td>
</tr>

<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br />
12345 Sunny Road<br />
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br />
John Doe<br />
[email protected]
</td>
</tr>
</table>
</td>
</tr>

<tr class="heading">
<td>Payment Method</td>

<td>Check #</td>
</tr>

<tr class="details">
<td>Check</td>

<td>1234</td>
</tr>

<tr class="heading">
<td>Item</td>

<td>Price</td>
</tr>

<tr class="item">
<td>Website design</td>

<td>$123.00</td>
</tr>

<tr class="item">
<td>Hosting (3 months)</td>

<td>$45.00</td>
</tr>

<tr class="item last">


<td>Domain name (1 year)</td>

<td>$67.00</td>
</tr>

<tr class="total">
<td></td>

<td>Total: $235.00</td>
</tr>
</table>
</div>
</div>

</body>
</html>
</body>
</html>

You might also like