Controlling browser's print options with JavaScript?

KAN · Post by **KAN** » Tue Dec 02, 2008 4:19 am

Although each browser's print options is different (for example, "Print Options" in Opera, and "Page Setup" in Internet Explorer), it seems they handle similar set of parameters, like:
- header and footer
- print margins
- paper size and orientation

Could I control those browser's parameters with JavaScript? Or better, with CSS? Internet Explorer is particularly annoying by enabling header and footer by default. Could I, for instance, write a JavaScript to disable browser's header and footer?

I'm also writing a web-based application that are supposed to print pages in exact size (A4, etc). I try to achieve the HTML page size by the following:

Code: Select all

<html>
<head>
</head>
<body>
<table border=1 style="width&#58;29.7cm;height&#58;21cm";border-color&#58;black">
<tr><td>A4</td></tr>
</table>
</body>
</html>

The code above give me exact A4 page size on screen, especially since I disable HTML page margin (<body>). Alas, when printing, the browser's margins still exist, ruining the print result. Is it possible to set browser's margins to zero (all of them; Top, Bottom, Left, Righ) using JavaScript?

Post by **wardrich** » Tue Dec 02, 2008 5:15 am

I could see how something like this could be taken for evil... especially if there's a way to bypass all user interaction.

fauvem · Post by **fauvem** » Tue Dec 02, 2008 6:39 am

I'm quilty of such evilness but in a different scripting language. I'll see if the code is still floating around.

AdamN · Post by **AdamN** » Sun Dec 14, 2008 4:06 am

To my knowledge, Javascript can't read hardware or peripheral devices to print a page with a specific paper size, nor can it remove the header or footer of the page you are printing, the easiest option would be to put a download of a printable document on your site, where users can download the document and print it without the headers and footers.

However, try this in CSS:

Code: Select all

body &#123; background-colour&#58;#EFEFEF;
           margin&#58;0px auto !important;
           padding&#58;0px auto !important;&#125;
#A4 &#123;background-color&#58;#FFFFFF;
        left&#58;200px;
        right&#58;190px;
        height&#58;297mm !important;
        width&#58;210mm !important;
        margin&#58;1px solid #FFFFFF; &#125;

and add it in HTML with this:

in body type

Code: Select all

 <div id="A4"></div>

save and test.

KAN · Post by **KAN** » Sun Dec 14, 2008 5:09 am

Thanks! I'll definitely try.