【C#】利用WebBrowser、CSS、JS控制開發HTML網頁文件的打印版
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
在項目中,有一個需求時是需要打印產品頁面。但是打印出來的版本和網頁上的版本不太一致,有些圖片不需要,網頁上以tab選項卡顯示的內容,都需要在打印頁面中看到..等等。 CSS針對這種需求,引入了一個@media 規則,@media規則允許你根據不同的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樣式)呈現的和打印出來的(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> 網頁上打印時不需要顯示的部分加上 class="noprint" 有時,需要在打印的頁面上,顯示網頁上折疊隱藏的內容,將內容完整的展示在紙上: <style type="text/css" media="print"> .print-show {display = block;} </style> 設置好需要打印內容的css后,我們一般會在頁面上增加一個button,button上面的內容為"Print this Page". 當點擊這個button時,會打印這個頁面。這個是通過javascript來實現的: <script type="text/javascript"> function printpage() { window.print(); } </script> 有的時候,一個網頁內容非常豐富, 有整個網站共享的layout,包括該網頁中的頭部,底部。而我們只需要打印這個網頁中間的內容,這種時候我們可以通過Javascript來實現。 假定網頁中間的內容,我們用一個div來包裹,這個div的Id為printDiv, 那么寫一個Javascript函數如下: <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 編輯過
|
關鍵字查詢
相關文章
正在查詢... |