Here a simple example of an html template created with TailwindCSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.2/dist/alpine.min.js" defer></script>
</head>
<body>
<div id="certificate" class="flex items-center justify-center">
<div class="my-5 lg:my-20 mx-0 p-2 lg:p-5 text-center border-8 border-blue-900 w-full lg:max-w-screen-lg z-10 bg-white">
<div class="text-center p-5 border-4 border-yellow-600 flex flex-col items-center justify-center" >
<div class="flex items-center justify-center my-4 lg:my-2">
<div class="text-yellow-600">
<svg class="fill-current w-8 lg:h-16 lg:w-16 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
</div>
</div>
<span class="block text-xl sm:text-2xl uppercase tracking-tighter font-bold text-pink my-6 text-yellow-600">Certificate of Appreciation</span>
<span class="block text-md lg:text-xl uppercase font-display font-bold text-blue-900 tracking-tighter my-6">Silton High School awards</span>
<span class="block mt-5 text-xl md:text-2xl lg:text-5xl text-pink uppercase text-yellow-600"><b>Emily Bryant</b></span><br/><br/>
<span class="block text-md lg:text-xl mt-1 block text-light font-display tracking-wide my-6 text-blue-900">For imparting valuable insights during the 32nd Commencement Ceremony.</span>
<div class="flex justify-between mt-20 mb-10 w-3/4">
<span class="block border-t-2 border-yellow-600 pt-4">
<p class="my-2 text-yellow-600 font-bold tracking-wider">Adora Montminy</p>
<p class="text-blue-900 tracking-wide">School Principal</p>
</span>
<span class="block border-t-2 border-yellow-600 pt-4">
<p class="my-2 text-yellow-600 font-bold tracking-wider">Nick Fletcher</p>
<p class="text-blue-900 tracking-wide">School Coordinator</p>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
This template adds a beautiful html certificate, maybe in a real layout it has a header, or footer, etc, what if I need to print just the certificate?, Well we are going to a add a button to print the certificate:
<button onclick="printCertificate()" class="fixed z-10 bg-blue-900 text-white bottom-0 right-0 m-10 py-2 px-4 rounded-full shadow-xl hover:text-yellow-600 focus:outline-none">Print</button>
The print button has an event, so now we need to add a Javascript function:
<script>
function printCertificate() {
const printContents = document.getElementById('certificate').innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
What does the script?
It gets the html element with the id "certificate", then it get the original html layout content, then it creates a new one and add the div content to this "new" html, then it prints the new html layout and finally the html becomes the original html layout.
Top comments (3)
this script doesnt work when you click the button second time :(
if you can share the code I can test it.
var mywindow = window.open();
var content = document.getElementById(elem).innerHTML;
mywindow.document.write(content);
mywindow.print();
In the above code, when you click the button "Print a Div" , a JavaScript popup window is created and extracted the contents of the HTML div elements to store it in a JavaScript variable. Then the contents of the HTML div elements are written to the popup window and finally the window is printed using the JavaScript Window print() command.
net-informations.com/js/progs/prin...