【C#】利用WebBrowser、CSS、JS控制開(kāi)發(fā)HTML網(wǎng)頁(yè)文件的打印版
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在項(xiàng)目中,有一個(gè)需求時(shí)是需要打印產(chǎn)品頁(yè)面。但是打印出來(lái)的版本和網(wǎng)頁(yè)上的版本不太一致,有些圖片不需要,網(wǎng)頁(yè)上以tab選項(xiàng)卡顯示的內(nèi)容,都需要在打印頁(yè)面中看到..等等。 CSS針對(duì)這種需求,引入了一個(gè)@media 規(guī)則,@media規(guī)則允許你根據(jù)不同的media指定不同的css style. @media print 指的就是print version的css樣式: @media screen //screen的樣式 { p.bodyCss {} }
@media print //print的樣式 { p.bodyCss {font-family: serif;} }
@media screen, print { p.bodyCss {font-size: 15pt} } 在上面的例子中,對(duì)于p的bodyCss樣式, 頁(yè)面上(screen樣式)呈現(xiàn)的和打印出來(lái)的(print樣式)是不一樣的字體,但是字體大小是一樣的。 你也可以專門(mén)為打印print樣式,引用一個(gè)專門(mén)的外部樣式: <link rel="stylesheet" type="text/css" media="print" href="css/printpage.css"> 也可以使用在頁(yè)面中直接包含css的形式: <style type="text/css" media="print"> .noprint {display = none} </style> 網(wǎng)頁(yè)上打印時(shí)不需要顯示的部分加上 class="noprint" 有時(shí),需要在打印的頁(yè)面上,顯示網(wǎng)頁(yè)上折疊隱藏的內(nèi)容,將內(nèi)容完整的展示在紙上: <style type="text/css" media="print"> .print-show {display = block;} </style> 設(shè)置好需要打印內(nèi)容的css后,我們一般會(huì)在頁(yè)面上增加一個(gè)button,button上面的內(nèi)容為"Print this Page". 當(dāng)點(diǎn)擊這個(gè)button時(shí),會(huì)打印這個(gè)頁(yè)面。這個(gè)是通過(guò)javascript來(lái)實(shí)現(xiàn)的: <script type="text/javascript"> function printpage() { window.print(); } </script> 有的時(shí)候,一個(gè)網(wǎng)頁(yè)內(nèi)容非常豐富, 有整個(gè)網(wǎng)站共享的layout,包括該網(wǎng)頁(yè)中的頭部,底部。而我們只需要打印這個(gè)網(wǎng)頁(yè)中間的內(nèi)容,這種時(shí)候我們可以通過(guò)Javascript來(lái)實(shí)現(xiàn)。 假定網(wǎng)頁(yè)中間的內(nèi)容,我們用一個(gè)div來(lái)包裹,這個(gè)div的Id為printDiv, 那么寫(xiě)一個(gè)Javascript函數(shù)如下: <script type="text/javascript"> function printversion() { document.body.innerHTML = document.getElementById("printDiv").innerHTML; window.print(); history.go(0); } </script> 該文章在 2023/8/11 18:29:55 編輯過(guò)
|
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |