Header getting printed while printing to printers using javascript

Question

Is there any good workaround for the following code that can be used to print to different printers such as receipt printer, id card printer and inkjet/laser printer? I dont want to use the pdf for saving the data and printing instead directly print from a web form or database.

I tried this but didnt work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript"> 
function Print(divID) 
{ 
//Get the HTML of div 
var divElements = document.getElementById(divID).innerHTML; 
//Get the HTML of whole page 
var oldPage = document.body.innerHTML; 
//Reset the page's HTML with div's HTML only 
document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>"; 
//Print Page 
window.print(); 
//Restore orignal 
HTML document.body.innerHTML = oldPage; 
} 
</script> 
<input type="button" value="Print" onClick="javascript:Print('print')" /> 
<div id="print"> Content to be printed </div>
</body>
</html>

this prints an header but I foot want those to be printed. I know printing header/footer is a browser side issue but still I would like to know he there is any way by which the code prevents the printing automatically. — Ayan, Jul 13 '14 at 11:21

score 0 · Answer 1 · answered Jul 10 '14 at 06:25

0

<script>
function Print(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;


    }
</script> 

<input type="button" value="Print" onclick="javascript:Print('print')" />

<div id="print">
 Content to be printed
</div>

answered Jul 10 '14 at 06:25

rack_nilesh

553
5
18

I guess this will print a document header. Am I right? – Ayan Jul 10 '14 at 06:51
No,it will print content whatever you will write in
.You may try above code by creating a simple html file
– rack_nilesh Jul 10 '14 at 07:07
Okay, I will surely give a try to it. By the way, if it prints the div then if I set the div to the size of an id card, will it print that size? – Ayan Jul 10 '14 at 07:11
printing header or footer is browser side issue. You may enable or disable printing header by changing print option in browser setting – rack_nilesh Jul 10 '14 at 07:15
yes sure ,it will print.For that you will need to use appropriate CSS – rack_nilesh Jul 10 '14 at 07:15
Tried it but print dialog didnt open. Check the edit in the question. – Ayan Jul 10 '14 at 07:57
HTML document.body.innerHTML = oldPage; Check this line. What's 'HTML' word doing here? Remove it. – rack_nilesh Jul 10 '14 at 08:51
@rack_nikesh, its printing an header :( – Ayan Jul 11 '14 at 14:45
it's not header.It's your actual to be printed content. Try it with writing hundreds of line in div. – rack_nilesh Jul 11 '14 at 14:51
Am getting the print content along with something like this on the top right corner and top left corner respectively: file://c:/Users/Ayan Dey/Desktop/test.html and untitled document I don't want these texts. – Ayan Jul 11 '14 at 15:57

Header getting printed while printing to printers using javascript

1 Answers1