JavaScript CSS control printing format example introduction

JavaScript CSS control printing format example introduction_javascript skills

WBOY

Release： 2016-05-16 17:05:07

Original

1372 people have browsed it

1. Use the css of media="print" to control the style of the file to be printed, testPrint.html, which refers to media as print, which means that the style will only take effect when printing

Copy the code The code is as follows:

/style/print.css file

Copy code The code is as follows:

.noprint{display:none;}

Using the style in print.css in testPrint.html, the effect will not be visible when browsing the web page , but it will work when printing, such as the following paragraph, after adding noprint, it is still realistic in the browser, but it will not be displayed when printing:

Copy the code The code is as follows:

Of course you can write whatever style you want in print.css and change the color (color image The effect is not good on a black and white printer, you can print in another style), any font or whatever, you can use it as you like--------------------------------- ------------------------------------------

2. Using JavaScript To control

For one reason or another, some people may not be very proficient in CSS, and some people are better at JavaScript. Sometimes JavaScript is also a good choice

Copy code The code is as follows:

This text will not be printed

Before printing, the window.onbeforeprint function will be called. At this time you Feel free to use your ingenuity to restructure the html and then print it. Of course, after printing, you usually have to get it back, which is the window.onafterprint function

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

Tips: Pay attention, we all know about printing It is window.print(). In fact, you can also print frames, such as window.top.centerFrame.MainFrame.print();