<!DOCTYPE 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">
<script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Wonderful Direct Pharmacy | Generate Pdf</title>
</head>
<body>
<button class="waves-effect waves-light" onclick="generatePDF()">Generate Invoice</button>
<div id="invoice">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="invoice-title">
<h2>Invoice</h2><h3 class="pull-right">Order No: fgh123-j</h3>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
Precious Pharmacy<br>
24H Surburb<br>
Foks-way<br>
Ogun-State, P.M.b 2343
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Shipped To:</strong><br>
Precious Pharmacy<br>
24H Surburb<br>
Foks-way<br>
Ogun-State, P.M.b 2343
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Mastercard ending **** 6464<br>
abayomiogunnusi@email.com
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
July,11 2021<br><br>
</address>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Purchase Summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Drug Name</strong></td>
<td class="text-center"><strong>Amount</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Total</strong></td>
</tr>
</thead>
<tbody>
<!-- foreach ($order->lineItems as $line) or some such thing here -->
<tr>
<td>Paracetamol</td>
<td class="text-center">₦1000.00</td>
<td class="text-center">1</td>
<td class="text-right">₦1000</td>
</tr>
<tr>
<td>Blood Tonic</td>
<td class="text-center">₦300.00</td>
<td class="text-center">2</td>
<td class="text-right">₦600.00</td>
</tr>
<tr>
<td>Chloroquine</td>
<td class="text-center">₦700.00</td>
<td class="text-center">2</td>
<td class="text-right">₦1400.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">₦3000.00</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">₦300</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Clearing</strong></td>
<td class="no-line text-right">₦100</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">₦3400</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function generatePDF() {
const element = document.getElementById('invoice');
html2pdf()
.from(element)
.save();
}
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.