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".
<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;
/* 隐藏不打印项 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 */
<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)>
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!