Design to print pages directly from HTML pages

Some applications in the site need to provide users with the ability to print the page directly, the most obvious is the electronic coupons, the merchant based on the site provided by the template input content, and then generate coupons page, users print this page is a coupon.


of course, the best way is based on this page to generate a picture file, users download the picture to print, the effect of printing will not be affected by the browser settings and the effect of printing.


But if for some reason, in order to fast or cost-saving, not to save the page as a picture file operation, then only directly to the HTML page directly down, so you need in the design of the page has some additional requirements, here two places to note:


1. Property settings for the style label:


<style type= "text/css" media= "print" >


here indicates that the style attributes introduced or defined in this style are used only when printing, and here is a reminder that if media properties are not set, the style defined will work in both the browser and the print, so it is recommended that styles like this be placed after all normal styles. For example, we want to print a line on the page "Print and Yahoo Word-of-mouth Network", but in the browser is not realistic:


<p class= "PrintTitle" > Print with yahoo word-of-mouth network </p>


then we can set. Printtitle{display:none in the unified style and set to. Printtitle{display:block in a later style of media "print". When you define a print style that is not higher than the regular defined style when printing, it is recommended that you put the print style behind all normal styles again.


2. When the page is printed, the browser settings will affect the printing effect, in IE "Tools" – Internet Options – Advanced has a "print background color and image", similar to "Print background colors and images" in Firefox "file"-"Page Setup". When this option is selected, the background color of the page and the picture can be printed (some of the non-standard IE kernel browser seems to have some problems, background color can be printed, but the background picture is not), if not selected the background color and pictures are unable to print out, So in order to mask the user's different browser and browser settings, I suggest two points, the first is in the background filled with the area as a demarcation place with the 1px border, color and background colors, so that in the browser does not appear to change, And in the printing time even if the user's settings cause the background color cannot print out can also have a border as the partition, the largest layer retains the page pattern; the second is to use <img/> tags for all essential images, so no matter how the user's browser is set up, they can print out the pictures. This may be different from the usual page design, but in order to unify the effect of printing, but also to compromise.


I here simply put forward some of the problems encountered in the practical use, if you have any new questions and ideas, can be proposed to discuss together, here first cast bricks;