jspdf-invoice-template-nodejs
Version:
PDF template created for invoice with optional parameters (for NodeJs). Using jsPDF library.
199 lines (190 loc) • 9.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - jsPDF Invoice Template Npm Package | © Edison Neza </title>
<style>
body {
background: #212121 ;
color: white ;
}
textarea.form-control {
background-color: inherit ;
color: white ;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HN6X66XGL0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-HN6X66XGL0');
</script>
</head>
<body>
<div class="container">
<div class="row mt-4">
<div class="col-sm">
<h3> Javascript PDF Invoice Template - Demo </h3>
<p> Edit the object below to generate another PDF document.</p>
<p><i>(Object based on v1.4.0)</i></p>
<h6>
<!-- <a target="_blank"
href="https://edisonneza.github.io/jspdf-invoice-template/documentation/global.html#jsPDFInvoiceTemplate">Take
a look at function documentation.</a> -->
</h6>
<h6><a target="_blank" href="https://github.com/edisonneza/jspdf-invoice-template#usage">How
to
import in my
project?</a></h6>
<div class="alert alert-danger d-none" role="alert">
<b>Syntax Error.</b> Please double check the object, because the format is incorrect!
</div>
<div class="row">
<div class="col-12">
<textarea class="form-control" rows="20" id="editor">
{
outputType: "save",
returnJsPDFDocObject: true,
fileName: "Invoice 2021",
orientationLandscape: false,
compress: true,
logo: {
src: "https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/logo.png",
width: 53.33, //aspect ratio = width/height
height: 26.66,
margin: {
top: 0, //negative or positive num, from the current position
left: 0 //negative or positive num, from the current position
}
},
business: {
name: "Business Name",
address: "Albania, Tirane ish-Dogana, Durres 2001",
phone: "(+355) 069 11 11 111",
email: "email@example.com",
email_1: "info@example.al",
website: "www.example.al",
},
contact: {
label: "Invoice issued for:",
name: "Client Name",
address: "Albania, Tirane, Astir",
phone: "(+355) 069 22 22 222",
email: "client@website.al",
otherInfo: "www.website.al",
},
invoice: {
label: "Invoice #: ",
num: 19,
invDate: "Payment Date: 01/01/2021 18:12",
invGenDate: "Invoice Date: 02/02/2021 10:17",
headerBorder: true,
tableBodyBorder: true,
header: [
{
title: "#",
style: {
width: 10
}
},
{
title: "Title",
style: {
width: 30
}
},
{
title: "Description",
style: {
width: 80
}
},
{ title: "Price"},
{ title: "Quantity"},
{ title: "Unit"},
{ title: "Total"}
],
table: Array.from(Array(15), (item, index)=>([
index + 1,
"There are many variations ",
"Lorem Ipsum is simply dummy text dummy text ",
200.5,
4.5,
"m2",
400.5
])),
invTotalLabel: "Total:",
invTotal: "145,250.50",
invCurrency: "ALL",
row1: {
col1: 'VAT:',
col2: '20',
col3: '%',
style: {
fontSize: 10 //optional, default 12
}
},
row2: {
col1: 'SubTotal:',
col2: '116,199.90',
col3: 'ALL',
style: {
fontSize: 10 //optional, default 12
}
},
invDescLabel: "Invoice Note",
invDesc: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.",
},
footer: {
text: "The invoice is created on a computer and is valid without the signature and stamp.",
},
pageEnable: true,
pageLabel: "Page ",
}
</textarea>
</div>
</div>
<div class="row">
<div class="col-12 mt-3">
<div style="text-align: right;">
<button class="btn btn-primary" onclick="GeneratePDF();">Generate PDF Invoice</button>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://unpkg.com/jspdf-invoice-template@latest/dist/index.js" type="text/javascript"></script>
<script>
// window.onload = function () {
// var editor = ace.edit("editor");
// editor.setTheme("ace/theme/monokai");
// editor.getSession().setMode("ace/mode/javascript");
// };
function GeneratePDF() {
var props = document.getElementById("editor").value;
console.log(props);
try {
//convert to js object
eval("props = " + props);
} catch {
var divAlert = document.getElementsByClassName("alert")[0];
divAlert.classList.remove("d-none");
setTimeout(function () {
divAlert.classList.add("d-none");
}, 5000);
// alert("Syntax Error. Please double check the object, because the format is incorrect!")
}
jsPDFInvoiceTemplate.default(props);
}
</script>
</body>
</html>