用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,具体效果你自己试验吧。

用CSS创建打印页面的更多相关文章

  1. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  2. 在PeopleSoft系统中实现打印页面的功能

    我们知道,在PeopleSoft HCM里,一般上了薪酬模块的话,都会客户化工资单页面,去匹配公司之前的工资单的报表的格式.有的时候,这个工资单页面又需要打印出来,以供员工的使用.PeopleSoft ...

  3. CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  4. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  5. Javascript动态调整文章的行距、字体、颜色,及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  7. 如何用css写打印样式

    打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...

  8. window.print()打印页面指定内容(使用iframe保证原页面不失效)

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  9. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

随机推荐

  1. python学习笔记——信号模块signal

    基于python学习笔记——多进程间通信——Linux信号基础的学习基础,进一步学习Python标准库中的signal模块. 尽管signal是python中的模块,但是主要针对UNIX平台(比如Li ...

  2. RUBY Error: Please update your PATH to include build tools or download the DevKit

    出错的原因是安装XXXXX的时候,需要build tools,但系统中没有.出错信息中同时也给出了解决的法案: 1. 到 http://rubyinstaller.org/downloads/ 去下载 ...

  3. Spring的三种注入方式(Setter、构造函数和自动注入)

    一.Setter注入 这里我是希望在Student.java中调用Course.java中的内容. public class Course { public String name = "数 ...

  4. Android UI视图效果篇之仿QQ好友列表分组悬浮PinnedHeaderExpandableListView

    楼主是在平板上測试的.图片略微有点大,大家看看效果就好 接下来贴源代码: PinnedHeaderExpandableListView.java 要注意的是 在 onGroupClick方法中pare ...

  5. android笔记---AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...

  6. Angular External js library calling Document.Ready

    https://stackoverflow.com/questions/51094841/angular-external-js-library-calling-document-ready Step ...

  7. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  8. C程序的内存布局

     1.代码段(code或text): 通常是指用来存放程序执行代码的一块内存区域.这部分区域的大小在程序运行前就已经确定,并且内存区域通常属于只读. 某些架构也允许代码段为可写,即允许修改程序.在代码 ...

  9. 利用ForgeryPy生成虚拟数据

    在程序研发过程中,我们往往需要大量的虚拟实验数据.Python中有多个包可以用于生成虚拟数据,其中功能较为完善的是ForgeryPy. 1 安装 采用pip进行安装: pip install Forg ...

  10. Leetcode: LRU Cache 解题报告

    LRU Cache  Design and implement a data structure for Least Recently Used (LRU) cache. It should supp ...