<html>
<head>
<style type="text/css">
main {width: 75%; margin: 2rem auto; background: #fff; padding: 2rem;}
button {text-align: center; display: inline-block; cursor: pointer;
margin-top: 1em; padding: 0.5em 1em; color: white; text-decoration: none;
font-size: 1re; border-radius: 3px;
transition: 0.3s; background: #a60b0f; border: none;}
button:hover {background-color: #c40004;}
table {width: 100%; max-width: 100%; border-spacing: 0; border-collapse:
collapse;}
table > tbody > tr:nth-of-type(odd) {background-color: none;}
table tbody > tr:hover {background-color: #f5f5f5;}
table tr:last-child:not(:first-child) th {background: #f5f5f5;}
table tr > td {padding: 0.5rem 0.5rem; border-top: 1px solid #f4f4f4;}
table thead > tr > th {color: #616161; padding: 0.5rem; text-transform:
capitalize;}
table thead tr:first-child th {padding-bottom: 1.2rem; padding-top: 1.2rem;
color: #797979;}
table td, table th {text-align: left;}
@media print {
@page {margin: 1.5cm;}
input {display: none;}
a:after {content: " (" attr(href) ")"; font-size: 80%;}
a {color: #000;}
p a {word-wrap: break-word;}
body {background: none; color: #444;} }
</style>
</head>
<body >
<center>
<button type="button" onclick="print()">Print table</button>
<main>
<table>
<thead>
<tr>
<th><span>Id</span></th>
<th><span>Name</span></th>
<th><span>Code</span></th>
<th><span>Qty</span></th>
<th><span>Price</span></th>
<th><span>Img</span></th>
<th>Active</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Unbranded Plastic Car </td>
<td> LFEOKEL1 </td>
<td> 27102 </td>
<td> 283.00 </td>
<td>
<td>false</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 2 </td>
<td> Handcrafted Frozen Mouse </td>
<td> NPRUTWA1 </td>
<td> 28788 </td>
<td> 389.00 </td>
<td>
<td>true</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 3 </td>
<td> Refined Cotton Bike </td>
<td> VMVIAZE1SOP </td>
<td> 50974 </td>
<td> 730.00 </td>
<td>
<td>true</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 4 </td>
<td> Tasty Soft Gloves </td>
<td> UZTAFMZ1 </td>
<td> 10765 </td>
<td> 837.00 </td>
<td>
<td>false</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 5 </td>
<td> Unbranded Concrete Soap </td>
<td> WCTECMF1150 </td>
<td> 97135 </td>
<td> 453.00 </td>
<td>
<td>false</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 6 </td>
<td> Handmade Wooden Mouse </td>
<td> KROELSR1 </td>
<td> 20784 </td>
<td> 7.00 </td>
<td>
<td>true</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 7 </td>
<td> Small Wooden Chips </td>
<td> WURETAK1 </td>
<td> 88842 </td>
<td> 157.00 </td>
<td>
<td>true</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 8 </td>
<td> Handcrafted Concrete Keyboard </td>
<td> ULBUMEY1 </td>
<td> 93269 </td>
<td> 549.00 </td>
<td>
<td>true</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 9 </td>
<td> Gorgeous Granite Bike </td>
<td> TFCUGIG1 </td>
<td> 2786 </td>
<td> 736.00 </td>
<td>
<td>false</td>
<td>
<span>Processing</span>
</td>
</tr>
<tr>
<td> 10 </td>
<td> Awesome Fresh Mouse </td>
<td> PFVEPTE1273 </td>
<td> 79119 </td>
<td> 967.00 </td>
<td>
<td>false</td>
<td>
<span>Processing</span>
</td>
</tr>
</tbody>
</table>
</main>
</center>
<script>
function print() {
const x = document.getElementsByTagName("head")[0].innerHTML;
const iframe = document.createElement("iframe");
iframe.onload = () => {
console.log("Local iframe is now loaded.");
setTimeout(() => {
window.frames["ng-print"].focus();
window.frames["ng-print"].print();
document.body.removeChild(iframe);
}, 500);
};
iframe.name="ng-print"
iframe.style.position = "absolute";
iframe.style.top = "-1000000px";
document.body.appendChild(iframe);
var frameDoc = iframe.contentWindow ? iframe.contentWindow :
iframe.contentDocument.document ? iframe.contentDocument.document :
iframe.contentDocument;
frameDoc.document.open();
frameDoc.document.write(x);
frameDoc.document.write(
document.getElementsByTagName("main")[0].innerHTML
);
frameDoc.document.close();
//remove iframe after print or cancelation
setTimeout(function() {
var a=document.querySelectorAll('iframe');
a[0].parentNode.removeChild(a[0])
}, 500);
}
</script>
</body>
</html>
|
