Scribd
Upload
5 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 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
We take content rights seriously. If you suspect this is your content, claim it here.
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