使用样式打印

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

网页上使用了很多技术来创建网页上的美观印刷。 有些人接受页面的副本并移除不需要的元素,有些人通过使用服务器端脚本( ASP,PHP,Perl,。) 打开一个。 我喜欢用风格来做:- )

样式

使用样式进行操作非常简单且优雅;创建一个单独的样式表,其中包含适合打印的元素:

  • 将 background 设置为白色( 背景:#ffffff ; )
  • 下划线链接( text-decoration:underline ),并可能为带有彩色打印机的用户着色
  • 隐藏不需要的零件 display:none ;

使用以下方法附加样式表:


<head>


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


</head>



media="打印" ( IE 4 +,网格 6 + 和 Opera 3.62 + ) 只有在打印页面时才使用这里浏览器。

这就是我如何附加 print.css.


<link rel="stylesheet" type="text/css" 



   href="css/print.css" media="print" />



如果你打印我的网页,你可以打印我的网页链接,你也可以看到我如何添加外部链接( 仅 IE 6 + )


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=beforePrint


window.onafterprint=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);


 }


}



有乐趣的编码( 打印和打印)。


style  print  打印  
相关文章