Hi Friends today Into this article, we are trying to make print and print preview separately using HTML, CSS, and JavaScript
If we create an application on HTML with CSS and JavaScript and I need to add print and print preview button separately on this application.
Here I am making a demo project on HTML with CSS and JavaScript.
Now firstly make a HTML file which is print on paper.
Code:
<html>
<body id="printarea">
<table class="tble">
<tr>
<td>
Student Name
</td>
<td>
John Sypon
</td>
</tr>
<tr>
<td>
Student Rollnumber
</td>
<td>
R001
</td>
</tr>
<tr>
<td>
Student Address
</td>
<td>
132 Kane Street Toledo OH 43612.
</td>
</tr>
<tr>
<td>
<input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
</td>
<td>
<input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
</td>
</tr>
</table>
</body>
</html>
We can add the css file in our html file:
<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />
Output:
And I am also added two CSS for make fine-looking our application, below is listed both css:
1. Print.css
2. Style.css
Print.css: The Print.css file is making a fine-looking our application when we give the print or print preview command. Below is Print.css file code.
@media print /*--This is for Print--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
-webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/
}
}
@media screen /*--This is for Print Preview Screen--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
}
}
Above @media screen use for change the style when we show on print preview, this print preview is made by itself in our application, I am creating this print preview using javascript in a window format and we also known as every html application is need the style for stunning our application, and @media screen provides the style when we open that application in new window as print preview.
Style.css
@media screen /*--This is for Screen--*/
{
.btn
{
background-color: #AFAFAF;
display: block;
}
.tble
{
background-color: #E5E5E5;
border: 1px solid #CD853F;
}
}
Above Stylesheet code will provide the style of our application on-screen (means on browser).
JavaScript:
Here I am using the javascript which is made a window where we give the print command.
<script type="text/javascript">
/*--This JavaScript method for Print command--*/
function PrintDoc() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
/*--This JavaScript method for Print Preview command--*/
function PrintPreview() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
</script>
Above I created two javascript functions (method) PrintDoc () and PrintPreview ()
PrintDoc ():
Now I am explaining PrintDoc():-
1. I am creating a variable toPrint named and initialize with document.getElementById('printarea') printareais the id of table which is we want to print.
2. Now here I am also is create a variable with popupWin named and it is initialize with window.open('', '_blank', 'width=350,height=150,location=no, left=200px') This line will make a window.
3. popupWin.document.open() this code will open the window with 350px width and 150px height.
4. popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">') this line will generate a print dialog box, and add the css file for this window.
- PopupWin.document.write(toPrint.innerHTML) this line add the data which want to print in the Print window.
- PopupWin.document.close() this line will close the document. PrintPreview ().
This method will work same as PrintDoc() method but the difference is that in this method is making for print preview your document.
Below are images for print and print preview
- Below the first time load in browser.
- When we click on the Print Preview button the background-color and border-color will change on this window and print and print preview button will also hide in this window.
- When we click on print button. This is print on paper.
Note:
When we give the print preview command the background color will not load this problem resolve for Mozilla you can go on Page Setup and check the Print Background.
And for webkit we add the -WebKit-print-color-adjust: exact add in CSS file.
Please Read also this Article :- CRUD Operation in Node.js with MongoDB
Anonymous User
02-Feb-2019Good Work.
Nandkumar BIde
24-Oct-2018I wont to hide this column when its going to print.
NA NA
13-Feb-2015Maria Correa
08-Jul-2013I tried your tutorial and it works amazing. I made the two functions in the same button, in my opencart product page. You can check it here: http://www.leleo.com.ar/store/index.php?route=product/product&product_id=50&path=25. A lot of work in CSS page.
Now I want to ask if there any posibility to add some code jspdf to print in pdf file. Or some javascript code to make a pdf.
Thanks you!