Printing with Style

最新推荐文章于 2024-10-15 11:35:25 发布

snail8384

最新推荐文章于 2024-10-15 11:35:25 发布

阅读量697

点赞数

分类专栏： Web 文章标签： printing stylesheet function browser web download

Web 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用CSS样式表来优化网页打印效果的方法，通过创建专门的打印样式表，可以隐藏不需要的内容、调整链接样式，并确保打印输出符合预期。此外，还提供了一个JavaScript示例，用于自动附加页面中的外部链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Printing with Style

By Per S

Introduction

There're a lot of techniques used on the net to create nice looking prints from web pages. Some take a copy of the pages and remove unwanted elements manually, some do it by opening a new print-friendly page using a server side script (ASP, PHP, Perl, ...). I prefer doing it with style :-)

Style

Doing it with style is simple and elegant; you create a separate style sheet with elements suited for print:

Set the background to white (background:#ffffff;)
Underline links (text-decoration:underline), and maybe color them blue for users with a color printer
Hide unwanted parts using display:none;

You attach the style sheet using:

Collapse

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

media="print" (IE 4+, Netscape 6+ and Opera 3.62+) tells the browser to use this only when you print the page.

This is how I attach my print.css.

Collapse

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

You can test it by printing one of my pages, if you print my Links page you'll also see how I append external links (IE 6+ only):

Collapse

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 
}

Append external links

A nice feature is to append all external links in the webpage, to the print document. This is implemented on my pages using the following JavaScript:

Collapse

// 

// 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.οnbefοreprint=beforePrint
window.οnafterprint=afterPrint

function 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);
    }
}

Have fun coding (and printing).

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here