Home > Developer > JavaScript
In bytes), you can delete it before printing, and restore it after printing.
The CSS style for printing is as follows:
Copy codeThe Code is as follows:
<Style type = "text/css" media = "print">
# Accordion h3, # vcol, div. loading, div. ui-tabs-hide, ul. ui-tabs-nav li, td. HeaderRight {display: none}
. Ui-jqgrid-titlebar,. ui-jqgrid-title {display: none}
Ui-jqgrid-bdiv_self {position: relative; margin: 0em; padding: 0; text-align: left ;}
# Pager {display: none; z-index:-1 ;}
</Style>
Print Code:
Copy codeThe Code is as follows:
$ ("# BtnPrint"). live ("click", function (){
Window. focus ();
Window. print ();
Return false;
});
Var GridHeight;
Function window. onbeforeprint (){
// Print the previous event var jqgridObj = jQuery ("# jqgridlist ");
GridHeight = jqgridObj. jqGrid ('getgridparam', 'height'); // obtain the jqgridObj height. jqGrid ('setgridheight', '20140901'); // set the height to 100%, this is mainly because the content in the Scroll entry can be printed out when there is a scroll entry in jqgrid $ ("# gview_jqgridlist. ui-jqgrid-bdiv "). removeClass (). addClass ("ui-jqgrid-bdiv_self"); // remove overflow attributes}
Function window. onafterprint () {// event after printing // release hidden elements
$ ("# Gview_jqgridlist. ui-jqgrid-bdiv_self "). removeClass (). addClass ("ui-jqgrid-bdiv"); // restore the overflow attribute. Otherwise, scroll entries in jqgrid will disappear. jQuery ("# jqgridlist "). jqGrid ('setgridheight', GridHeight); // set it to the height before printing}
CSS media attributes:
Media Types allow you to define the Media to submit documents. Documents can be displayed on the display, paper media, or auditory browsers.
Media type
Some CSS attributes are only designed for certain media. For example, the "voice-family" attribute is designed for auditory user terminals. Other attributes can be used in different media. For example, the "font-size" attribute can be used for display and print media, but may have different values. The document displayed on the display usually requires a larger font size than the paper media document. At the same time, on the display, the sans-serif font is easier to read, while on the paper media, the serif font is easier to read.
@ Media rules
@ Media rules enable you to use different style rules for different media in the same style sheet.
The style in the following example tells the browser to display a 14-pixel Verdana font on the display. However, if the page needs to be printed, the 10-pixel Times font will be used. Note: font-weight is set to bold, whether display or paper media:
Copy codeThe Code is as follows:
<Html>
<Head>
<Style>
@ Media screen
{
P. test {font-family: verdana, sans-serif; font-size: 14px}
}
@ Media print
{
P. test {font-family: times, serif; font-size: 10px}
}
@ Media screen, print
{
P. test {font-weight: bold}
}
</Style>
</Head>
<Body>... </body>
</Html>
Different media types
Note:Media type names are case insensitive.
| Media type | Description |
|---|---|
| All | Used for all media devices. |
| Aural | Used for speech and audio synthesizer. |
| Braille | It is used for blind people to use the dot-text method for tactile feedback devices. |
| Embossed | Blind persons used for paging use the dot-Print printer. |
| Handheld | Small handheld devices. |
| Used for printers. | |
| Projection | Used for scheme display, such as slides. |
| Screen | Used for computer display. |
| Tty | It is used to use fixed-density letter raster media, such as telex typewriters and terminals. |
| TV | A device of the TV type. |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
