I’m having a problem wherein I want to use PrintJS library in PHP. I created a PHP file which is invoice.php that is what I want to print out as a PDF using the library. I also created a JavaScript function in which I call the printJS function. How can I able to view the PHP file as a PDF using JavaScript
This is my invoice.php in which I want to print out using the JavaScript function in which I added the printJS function:
<!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">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<title>VShip Invoice</title>
<style>
body {
margin-left: auto;
margin-right: auto;
width: 210mm;
height: 297mm;
}
.invoice {
border-collapse: collapse;
width: 100%;
}
p {
font-family: 'Open Sans';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Raleway';
}
.invoice td,
th {
padding: 8px;
border-left: 2px solid #d3d3d3;
border-right: 2px solid #d3d3d3;
}
.invoice td {
font-family: 'Open Sans';
}
.invoice th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #d3d3d3;
color: white;
text-transform: uppercase;
font-family: 'Open Sans';
}
input {
background: transparent;
border: none;
border-bottom: 1px solid #5c5c5c;
}
/* .container {
align-items: center;
display: flex;
justify-content: center;
} */
<body>
<div class="container">
<div class="content">
<!-- Logo -->
<div style="text-align:center;">
<div>
<img src="<?= base_url('assets/images/vivmo-logo.png') ?
>" alt="logo" style="width:180px;" class="logo-default" />
</div>
<div style="line-height:0.4;">
<p>5730 Roseville Rd, Sacramento, CA 95842</p>
<p>+1 844 90 VIVMO(844-908-4866)</p>
<p>[email protected]</p>
</div>
</div>
<!-- End Logo -->
<!-- Bill Information Heading -->
<div style="padding-top:15px;">
<!-- Bill To -->
<div style="float:left;padding-left:30px;">
<div>
<h3 style="font-weight:800;margin-top:18px;margin-
bottom:0px;">Bill To:</h3>
</div>
<div style="margin-top:-10px;">
<h4 style="margin-bottom:0px;">Client's Name</h4>
<div style="line-height:0.4;margin-top:-8px;">
<p>5730 Roseville Rd</p>
<p>Sacramento, CA 95842</p>
</div>
</div>
</div>
<!-- End Bill To -->
<!-- Bill Invoice Number -->
<div style="float:right;">
<div style="background-color:#d3d3d3;padding:1px 61px 1px 10px;">
<h3 style="font-family:'Open Sans';color:#fff;margin-top:8px;margin-bottom:8px;font-size:1.5em;padding-left:30px;padding-right:30px;">INVOICE #0001</h3>
</div>
<div style="padding-left:25%;">
<p style="margin-top:5px;margin-bottom:5px;font-size:13.5px;font-weight:500;">Date: 10-12-2022</p>
</div>
</div>
<!-- End Bill Invoice Number -->
</div>
<!-- End Bill Information Heading -->
<br>
<!-- Bill Information Table -->
<div style="margin-top:18%;padding-left:30px;padding-right:30px;">
<table class="invoice">
<tr>
<th>Description</th>
<th>QTY</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr style="border-bottom:2px solid #d3d3d3;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- End Bill Information Table -->
<!-- Bill Information Total -->
<div style="margin-top:20px;">
<div style="float:left;background-color:#d3d3d3;width:50%;">
<div style="text-align:center;padding-top:13%;padding-bottom:13%;">
<h3 style="color:#fff;font-family:'Open Sans';font-size:1.6em;padding-left:16%;padding-right:16%;">THANK YOU FOR YOUR BUSINESS!</h3>
</div>
</div>
<div style="float:right;padding-right:30px;">
<table>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;">Subtotal</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Subtotal Less Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Tax Rate(%)</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Total Tax</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Shipping/Handling</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
</table>
<table>
<hr style="border:1px solid #d3d3d3;">
</table>
<div style="float:left;margin-left:30%;">
<h3 style="margin-top:0px;font-family:'Open Sans';">Total</h3>
</div>
<div style="float:right;">
<h3 style="margin-top:0px;font-family:'Open Sans';font-weight:800;">$999,000</h3>
</div>
</div>
</div>
<!-- End Bill Information Total -->
<!-- Billing Terms and Instruction -->
<div style="margin-top:33%;padding-left:30px;padding-right:30px;">
<div>
<div>
<h3 style="font-size:15px;">Terms & Instruction</h3>
</div>
</div>
<div style="border:1px solid #d3d3d3;">
<div style="padding:18px;">
<p style="font-size:13px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum fugit quaerat quos cupiditate soluta? Quasi voluptatibus debitis consequuntur asperiores saepe.
</p>
</div>
</div>
</div>
<!-- End Billing Terms and Instruction -->
<!-- Billing Footer -->
<div style="background-color:#d3d3d3;margin-top:30px;">
<div>
<div style="padding:1px 30px;">
<h5 style="color:#fff;font-family:'Raleway';font-weight:500;">vivmo.co</h5>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- End Billing Footer -->
</div>
</div>
And this is the function in which I add the PrintJS function to print the PHP file
function print_invoice()
{
printJS({
printable: base_url + "shipment/invoice",
type: 'pdf',
targetStyles: ['*']
})
}
2
Answers
You can use like this way