JAVASCRIPT+CSS Control Printing Format Sample Introduction _javascript Tips

1. Use the media= "print" CSS to control the style that refers to media print in the file testprint.html you want to print, which means that the style works when you print

Copy Code code as follows:

<link href= "/style/print.css" rel= "stylesheet" type= "Text/css" media= "print" >

/STYLE/PRINT.CSS file

Copy Code code as follows:

. Noprint{display:none;}

Use the style in the print.css in the testprint.html, can not see the effect when browsing the Web page, but it will work when printing, as the following paragraph, plus noprint, is still realistic in the browser, but does not display when printing:

Copy Code code as follows:

<div class= "Noprint" >
<input type= "button" onclick= "Window.print ();" value= "Print this page"/>
</div>

Of course print.css inside the style you can write casually, change color AH (color image in black and white printer effect is not good, can use another style printing), the font of anything can, casually play--------------------------------------------------- --------------

2. Use JavaScript to control

Because of this reason, maybe some people css is not very skilled, some people javascript compared to cow X, sometimes JavaScript is also a good choice

Copy Code code as follows:

<script type= "Text/javascript" >
<!--
Automatically execute before printing
Window.onbeforeprint = function () {
$ ("#test"). Hide ();
}

Automatically execute after printing
Window.onafterprint = function () {
$ ("#test"). Show ();
}
-->
</script>


<div id= "Test" > This text will not be printed out </div>

Before you print, the Window.onbeforeprint function is called, and you can play it by yourself, using your ingenuity to reconstruct the HTML and then print. Of course, after the printing generally have to get back, is the Window.onafterprint function

---------------------------------------------------------------

Tip: Note that printing we all know is window.print (), in fact, can also print frames, such as window.top.centerFrame.MainFrame.print ();