zoukankan      html  css  js  c++  java
  • 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面。

    第一、在HTML页面加入为打印机设置的CSS文件

    <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" ,是面向屏幕的;

    media="print" ,是面向打印的;

    第二、建立打印版本的页面,去除不必要的页面元素,如导航、侧栏、广告、版权等。这时就可以体现出按“WEB标准”做页面的优势了,用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 */
    

    第三、打印按钮函数,IE、Firefox均可正常打印。

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

    另外,还有一个本地版的打印页面,可以进行“打印设置”和“打印预览”,但因为此设置,网络打印需要调用IE浏览器一个控件,还需降低ActiveX控件安全,且只能在IE上运行,不实用。所以只贴一下调用代码,备份。

    <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)>
    

    第四、注意事项

    在打印样式中,打印字体大小是以点(pt)来计的,屏幕上字体大小显示,象素(px)比点和英尺更合适。

    在打印样式中,CSS的float属性有时可能会引起一些麻烦,会造成打印页面缺失,所以尽量去除不必要块级显示。

    关于打印设置,自定义页眉、页脚,我查阅了一番资料,对此CSS和HTML无法控制,只能通过调用ActiveX控件来实现,但是这样做不安全。最好方法是,打印前,你自己点击浏览器菜单进行打印设置。

    CSS中还有一个可以设置分页符的标签:“page-break-after”和“page-break-before”。因为我的节日页面,表格较多,所以就没有应用这个CSS,具体效果你自己试验吧。

  • 相关阅读:
    【leetcode】1215.Stepping Numbers
    【leetcode】1214.Two Sum BSTs
    【leetcode】1213.Intersection of Three Sorted Arrays
    【leetcode】1210. Minimum Moves to Reach Target with Rotations
    【leetcode】1209. Remove All Adjacent Duplicates in String II
    【leetcode】1208. Get Equal Substrings Within Budget
    【leetcode】1207. Unique Number of Occurrences
    【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays
    【leetcode】LCP 3. Programmable Robot
    【leetcode】LCP 1. Guess Numbers
  • 原文地址:https://www.cnblogs.com/ranran/p/css_printed_page.html
Copyright © 2011-2022 走看看