Some applications on the website need to provide the function for users to print pages directly. The most obvious one is electronic coupons. Merchants input content according to the template provided by the website, and then generate a coupon page. When the user prints this page, it is a coupon.
Of course, the best way is to generate an image file based on this page. The user downloads the image and then prints it. The printing effect will not be affected by the browser settings.
But if for some reasons, in order to speed up or save costs, you do not save the page as an image file, then you can only print the HTML page directly, which requires some additional requirements in the design of the page, here Two things need to be noted:
1. Set the attributes of the style tag:
<style type=”text/css” media=”print”>
This means that the style attributes introduced or defined in this style are only used when printing. As a reminder, if the media attribute is not set, the defined style will take effect in both the browser and printing, so it is recommended to use a style like this Placed after all regular styles. For example, we hope that there will be a line "Print and Yahoo Word of Mouth Network" on the printed page, but this is not realistic in the browser:
<p class="printTitle">Print and Yahoo word-of-mouth network</p>
Then we can set .printTitle{display:none;} in the unified style, and set it to .printTitle{display:block;} in the subsequent style where the media is "print". The defined print styles do not have a higher priority than the regularly defined styles when printing, so it is again recommended to place the print styles after all regular styles.
2. When the page is printed, the browser settings will have an impact on the printing effect. In IE, there is a "Print background color and image" in "Tools" - "Internet Options" - "Advanced", similar in Firefox In "File" - "Page Setup", there is a "Print background color and image". When this option is selected, the background color and image in the page can be printed out (some non-standard IE kernel browsers seem to have some Problem, the background color can be printed, but the background image cannot). If it is not selected, neither the background color nor the image can be printed. So in order to shield users from different browsers and browser settings, I suggest two points. The first is to use The area filled with the background color is used as the boundary and a 1px border is added. The color is the same as the background color, so that no change can be seen in the browser. When printing, even if the user's settings prevent the background color from being printed, there can still be a Borders are used as divisions, and the page layout is retained on the largest layer; the second is to use <img/> tags for all essential pictures, so that these pictures can be printed no matter how the user's browser is set. This may be the same as Usually some pages are designed in different ways, but in order to unify the printing effect, we only have to give in.
I have simply raised some problems encountered in practical applications. If you have any new questions or ideas, you can bring them up for discussion together. I will throw them out here first;
Original text: http://ued.koubei.com/?p=918