说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

用CSS样式展现可打印页面

HTML文档下载 WORD文档下载 PDF文档下载
有许多创建可打印WEB页面的技术,许多都是复制页面并删除不需要的元素,许多都使用服务器端脚本(如:ASP,PHP,PERL,...)打开一个可打印的页面。我采用样式表来实现。

原作者:Per S

翻译:http://www.okbase.net/home/haobao

 

有许多创建可打印WEB页面的技术,许多都是复制页面并删除不需要的元素,许多都使用服务器端脚本(如:ASP,PHP,PERL,...)打开一个可打印的页面。我采用样式表来实现。

样式表

用样式表来实现是非常简单优雅的,你可以创建一个独立的样式表专门用于打印:
设置背景色为白色(background:#ffffff)
下划线(text-decoration:underline),对于彩色打印机,我们可以设置为蓝色
用display:none;隐藏不需要打印的内容

附加样式表:

<head><link rel="stylesheet" type="text/css" href="..." media="print" /></head>

media="print" (IE 4+, Netscape 6+, Opera 3.62+) 告诉浏览器这个样式只在打印时用。

我的代码是这样写的:

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

你也可以根据需要添加附加的样式:

body {     color : #000000;     background : #ffffff;     font-family : verdana,arial,sans-serif;    font-size : 12pt;}h2 {    font-size : 14pt;}a {     text-decoration : underline;    color : #0000ff;}#logo,#head,#menu,#tail,#printicon, {    display : none;}#appendedlinks {    page-break-before: always }

对于链接,我们可以用JavaScript统一修改:

// // IE only: attach eventhandlers.// They trigger when a user  prints a web page; //     From File->Print, File->Print Preview or//     by executing a window.print() command //window.onbeforeprint=beforePrintwindow.onafterprint=afterPrintfunction beforePrint() {    appendlinks(content);}function afterPrint() {    removelinks(appendedlinks);}//// Generic print function, called from the web page//function printContent() {    if (window.print) {           window.print();    } else {        alert("your browser doesn't support this function")    }}// // When appending links to the document, do not // append links pointing to the following domains / sites//var excludedomains=["soderlind.no", "soderlind.org","localhost"]var excludedomains=excludedomains.join("|")rexcludedomains=new RegExp(excludedomains, "i")//// appendlinks(id)// id = id of the part of the web page you want to extract links from//      ex: document.body//function appendlinks(id){        var strD = "<p/>";    var num = 0;    if (document.getElementById){        var links=id.getElementsByTagName("A")            var total=links.length        strD += "<dl id=\"appendedlinks\" border=0>"        strD += "<dt><h2>Links extracted from the document:</h2></dt>"        for (i=0;i<total;i++){            if (links[i].hostname.search(rexcludedomains)==-1                 && links[i].href.indexOf("http:")!=-1) {                strD += '<dt>'+links[i].innerText+'</dt>'                strD += '<dd>'+links[i]+'</dd>'                num++;            }        }        strD += "</dl>"        if (id.insertAdjacentHTML && num>0)            id.insertAdjacentHTML("beforeEnd",strD);    }}//// removelinks(id)// After the print job is done, remove the appended links from the document// id = appendedlinks//function removelinks(id) {    if (document.getElementById){        id.removeNode(true);    }}

当然,你也可以用JQuery使这一过程更简单,祝你编码愉快。

 

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘