Teach you how to create a print page with CSS

Use CSS to create a print page. You don't have to create an HTML file specifically for printing, which can save some energy. The premise is to use CSS+p to layout the HTML page according to the "WEB standard".

First, add the CSS file set for the printer to the HTML page

<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" />	
<link href="css/admin-print.css" rel="stylesheet" type="text/css" media="print" />

media="screen" is screen-oriented;

media="print" is for printing;

Second, create a print version of the page and remove unnecessary page elements, such as navigation, sidebars, advertisements, copyrights, etc. At this time, the advantage of making pages according to "WEB standards" can be reflected. It is easy to change the layout with CSS.

/* 隐藏不打印项 start */
h1 span {    /* 副标题 */
 display: none;  
}
#sidebar {   /* 侧栏 */
 display: none;
}		
#content td.ads {  /* 表格内广告 */
 display: none;
}		
#content th.col2 span {  /* 锚链接 */
 display: none;
}		
#content #bottom-2 {  /* 页尾表格打印 */
 display: none;
}		
/* 隐藏不打印项 end */

Third, the print button function can print normally in IE and Firefox.

<input type=button value="打 印 本 页" onclick="window.print()">

In addition, there is a local version of the printing page that allows for "print settings" and "print preview". However, because of this setting, network printing needs to call a control in the IE browser, and the security of the ActiveX control needs to be reduced, and it can only be used in IE. Running on it is not practical. So I only post the calling code for backup.

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> </OBJECT>
<input type=button value="打印预览" onclick=document.all.WebBrowser.ExecWB(7,1)>
<input type=button value="页面设置" onclick=document.all.WebBrowser.ExecWB(8,1)>
<input type=button value="打印本页" onclick=document.all.WebBrowser.ExecWB(6,1)>

Fourth, things to note

In print styles, print font size is measured in points (pt), and for on-screen font size display, pixels (px) are more appropriate than points and feet.

In print styles, the float attribute of CSS may sometimes cause some trouble and cause the printed page to be missing, so try to remove unnecessary block-level display.

Regarding print settings and customizing headers and footers, I checked some information and found that CSS and HTML cannot be controlled and can only be achieved by calling ActiveX controls, but this is not safe. The best way is to click on the browser menu to set the print settings yourself before printing.

There is also a tag in CSS that can set page breaks: "page-break-after" and "page-break-before". Because my holiday page has many tables, I didn’t apply this CSS. You can test the specific effect yourself.

The above is the detailed content of Teach you how to create a print page with CSS. For more information, please follow other related articles on the PHP Chinese website!