Some experience with printing pages

Source: Internet
Author: User
Tags relative visibility
We often encounter the need to hide some objects that don't need to be printed when we print the form in IE. for example, the button, the input box, or the hope that Mo table is displayed when the form line is by color, and when printing only need to have the thickness, in fact, in the CSS can be set in the printing or display of different styles, Recently made an application (it is revolt), can get the above effect, the following is my style sheet ....
<style type= "Text/css" media=print> is mainly media options. Check with the one style below
. Noprint{visibility:hidden}
span.double {border-bottom-style:double; border-left-style:double;
border-right-style:double; border-top-style:double; Color:mediumblue;
Cursor:hand; font-size:12pt; height:22px; left:314px; Text-align:center;
WIDTH:96PX}
select.sb{z-index:121; left:0px; width:90px; Position:absolute;
height:170px}
span.tab{left:40px; width:900px; position:relative; top:0px; HEIGHT:225PX}
Table{border-right:black medium inset; Border-top:black medium inset; Border-left:black medium inset; width:900px; Border-bottom:black medium inset; height:31px; Position:absolute}
Tr.col0{border-right:thick inset; Border-top:thick inset; Font-weight:bold; font-size:15px; Border-left:thick inset; border-bottom:10px; Font-family: Song body; Background-color:blue; Text-align:center}
tr.tr1{}
td.td0{width:120px; text-align:center;height:30px;}
td.td1{width:330px; Text-align:right}
td.td2{width:70px; Text-align:right}
td.td3{width:330px; Text-align:right}
</style>

<style media=screen> is primarily a media option. Look at the style above
span.double {border-bottom-style:double; border-left-style:double; border-right-style:double; border-top-style:double; Color:mediumblue;
Cursor:hand; font-size:12pt; height:22px; left:314px; Text-align:center;
WIDTH:96PX}
select.sb{z-index:121; left:0px; width:90px; Position:absolute;
height:170px}
span.tab{left:154px; width:900px; position:relative; top:30px; HEIGHT:225PX}
Table{border-right:blue Groove; Border-top:blue Groove; Border-left:blue Groove; width:900px; Border-bottom:blue Groove; Position:absolute}
Tr.col0{border-right:red thick inset; Border-top:red thick inset; Font-weight:bold; font-size:15px; Border-left:red thick inset; Color:white; Border-bottom:yellow 10px solid; Font-family: Song body; Background-color:blue; Text-align:center}
Tr.tr1{border-bottom:fuchsia inset}
td.td0{width:120px; Border-left-style:none; Text-align:center; Border-bottom-style:none}
td.td1{width:330px; Border-left:blue thin solid; Text-align:right}
td.td2{width:70px; Border-top-style:inset; Border-right-style:inset; Border-left-style:inset; Text-align:right; Border-bottom-style:inset}
td.td3{width:330px; Border-top-style:inset; Border-right-style:inset; Border-left-style:inset; Text-align:right; Border-bottom-style:inset}
Td.td5{text-align:right}
</style>
Let's take a closer look at it. In fact, just build 2 style and no style points to different devices, but use the same ID in style, so that you can refer to the same ID number in an object that needs to be printed and displayed in a different style (for example, <td class=td3> ...). </td> But there is an important question to look carefully at my print is set not to print is by setting "Visibility:hidden" to achieve, but I found in the actual application of the script code in the "obj.style.visibility= Visible "that is, the visibility of the Mo objects are also displayed when I print, that is to say, the operation of the script code for different devices at the same time (but I think there should be a way to specify the device for a certain, but after a long time did not find, Or maybe CSS is not perfect yet) I finally passed another style attribute display was implemented, that is, in the script code with obj.style.diaplay= "block" or "none" to achieve the display of the object so that does not affect the implementation of the printing function.
But overall, IE's printing is still not perfect for example, you can not achieve a large number of paging print data, but in visual. NET I found that Microsoft has joined the Crystal Report function I think I should be able to achieve, but has not been used, and later have the opportunity to report to you.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.