【C#】利用WebBrowser、CSS、JS控制開發(fā)HTML網(wǎng)頁文件的打印版
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
在項目中，有一個需求時是需要打印產(chǎn)品頁面。但是打印出來的版本和網(wǎng)頁上的版本不太一致，有些圖片不需要，網(wǎng)頁上以tab選項卡顯示的內(nèi)容，都需要在打印頁面中看到..等等。 CSS針對這種需求，引入了一個@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} } 在上面的例子中，對于p的bodyCss樣式, 頁面上（screen樣式）呈現(xiàn)的和打印出來的(print樣式)是不一樣的字體，但是字體大小是一樣的。 你也可以專門為打印print樣式，引用一個專門的外部樣式： <link rel="stylesheet" type="text/css" media="print" href="css/printpage.css"> 也可以使用在頁面中直接包含css的形式： <style type="text/css" media="print"> .noprint {display = none} </style> 網(wǎng)頁上打印時不需要顯示的部分加上 class="noprint" 有時，需要在打印的頁面上，顯示網(wǎng)頁上折疊隱藏的內(nèi)容，將內(nèi)容完整的展示在紙上： <style type="text/css" media="print"> .print-show {display = block;} </style> 設(shè)置好需要打印內(nèi)容的css后，我們一般會在頁面上增加一個button,button上面的內(nèi)容為"Print this Page". 當(dāng)點(diǎn)擊這個button時，會打印這個頁面。這個是通過javascript來實(shí)現(xiàn)的： <script type="text/javascript"> function printpage() { window.print(); } </script> 有的時候，一個網(wǎng)頁內(nèi)容非常豐富, 有整個網(wǎng)站共享的layout，包括該網(wǎng)頁中的頭部，底部。而我們只需要打印這個網(wǎng)頁中間的內(nèi)容，這種時候我們可以通過Javascript來實(shí)現(xiàn)。 假定網(wǎng)頁中間的內(nèi)容，我們用一個div來包裹，這個div的Id為printDiv, 那么寫一個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ān)鍵字查詢
相關(guān)文章
正在查詢... 
|
||||||
400 186 1886
