Build PDFMake.js AngularJS PDF Invoice Product Table Receipt Generator in Browser Using HTML5 and Javascript article is a very simple article. That means how to learn this article in a simple way, we will see through the article about it.
Build PDFMake.js AngularJS PDF Invoice Product Table Receipt Generator in Browser Using HTML5 and Javascript
<style>
body {
background-color: #1f292e;
}
.quote ul li {
display: flex;
flex-flow: row;
}
.title {
text-align: center;
font-family: "Audiowide", sans-serif;
color: white;
}
.val {
flex: 1;
color: #1f292e;
font-family: "Audiowide", sans-serif;
font-weight: normal;
text-align: center;
}
.ls .val {
color: #ffffff;
font-weight: bolder;
}
.ls .tab {
background-color: #f4837d;
}
.quote form {
background-color: #1f292e;
border: solid;
border-width: 3px;
border-color: #99b998;
border-radius: 10px;
margin: 50px;
padding: 20px;
position: relative;
display: flex;
flex-flow: row;
position: relative;
}
.tab {
width: 100%;
background-color: #ffdda6;
margin: 10px;
padding: 20px;
position: relative;
display: flex;
flex-flow: row;
}
.quote ul {
padding: 0%;
}
.lis {
display: flex;
flex-flow: row;
}
.lis h3 {
margin: 10px;
}
.inp {
display: inline;
transform: translateX(0vw);
padding: 10px;
justify-content: center;
color: white;
font-family: "Audiowide", sans-serif;
margin: auto;
font-size: 20px;
}
.inp input {
width: 200px;
height: 30px;
}
.tab.total {
width: 50%;
margin-left: 50%;
}
.inp button,
.btn {
color: #1f292e;
background-color: #99b998;
font-weight: bolder;
border: none;
padding: 5px 10px;
}
.btn {
padding: 20px 50px;
transform: translateX(-50%);
position: absolute;
left: 50%;
}
.scroll {
overflow-y: scroll;
max-height: 35vh;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.quote {
margin: 50px 250px;
}
@media screen and (max-width: 1399px) and (min-width: 992px) {
.quote {
margin: 50px 50px;
}
}
@media screen and (max-width: 1100px) and (min-width: 900px) {
.quote {
margin: 0px 0px;
}
}
@media screen and (max-width: 900px) and (min-width: 0px) {
.quote {
margin: 0px 0px;
}
.quote form {
flex-flow: column;
}
.inp {
text-align: right;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<body ng-app="qgApp">
<div class="quote" ng-controller="quotation">
<h1 class="title t1">Quotation Table</h1>
<form ng-submit='addData()'>
<div class="inp">
NAME
<input type="text" ng-model="name">
</div>
<div class="inp">
QUANTITY
<input type="number" ng-model="quantity">
</div>
<div class="inp">
RATE
<input type="number" ng-model="rate">
</div>
<div class="inp">
<button type="submit">ADD</button>
<!-- <input type="submit" value="add"> -->
</div>
</form>
<ul>
<li class="lis ls">
<div class="tab">
<h3 class="val">NAME</h3>
<h3 class="val">RATE</h3>
<h3 class="val">QUANTITY</h3>
<h3 class="val">AMOUNT</h3>
</div>
</li>
</ul>
<div class="scroll">
<ul>
<li ng-repeat="q in quot" class="lis">
<div class="tab">
<h3 class="val">{{q.name}}</h3>
<h3 class="val">{{q.rate}}</h3>
<h3 class="val">{{q.quantity}}</h3>
<h3 class="val">Rs.{{q.rate * q.quantity}}</h3>
</div>
</li>
</ul>
</div>
<ul>
<li class="lis ls">
<div class="tab total">
<!-- <h3 class="val">NAME</h3>
<h3 class="val">RATE</h3> -->
<h3 class="val">TOTAL</h3>
<h3 class="val">{{totals}}</h3>
</div>
</li>
</ul>
<button class="btn" ng-click="makePdf()">
DOWNLOAD PDF
</button>
</div>
</body>
<script>
var app = angular.module("qgApp", []);
app.controller("quotation", function ($scope) {
$scope.totals = 0;
$scope.name = "phone";
$scope.quantity = 10;
$scope.rate = 10000;
$scope.addData = function () {
$scope.quot.push({
name: $scope.name,
quantity: $scope.quantity,
rate: $scope.rate
});
$scope.totals = $scope.totals + $scope.rate * $scope.quantity;
$scope.name = "";
$scope.quantity = "";
$scope.rate = "";
console.log($scope.quot);
};
$scope.quot = [];
$scope.makePdf = function () {
var doc = {
content: [
{ text: "Tables", style: "header" },
{ text: "A simple table ", style: "subheader" },
{
table: {
body: [
["Column 1", "Column 2", "Column 3"],
["One value goes here", "Another one here", "OK?"]
]
}
}
]
};
var l = {};
var x = ["Name", "Quantity", "rate", "Amount"];
l.content = [];
l.content.push({ text: "Tables", style: "header" });
l.content.push({ table: { body: [] } });
l.content[1].table.body.push(x);
let total = 0;
for (var i = 0; i < $scope.quot.length; i++) {
a = [];
a.push($scope.quot[i].name);
a.push($scope.quot[i].quantity);
a.push($scope.quot[i].rate);
a.push($scope.quot[i].rate * $scope.quot[i].quantity);
total = total + $scope.quot[i].rate * $scope.quot[i].quantity;
l.content[1].table.body.push(a);
}
to = [];
to.push(" ");
to.push(" ");
to.push("Total");
to.push(total);
l.content[1].table.body.push(to);
console.log(l.content);
pdfMake.createPdf(l).download();
};
});
</script>Final Words
I owe it to you to provide the Build PDFMake.js AngularJS PDF Invoice Product Table Receipt Generator in Browser Using HTML5 and Javascript article in a very simple way. Let us know in the comment box if you need more useful information.
