&

【C#】利用WebBrowser、CSS、JS控制開發HTML網頁文件的打印版

admin

2023年8月11日 18:17 本文熱度 1571

在項目中，有一個需求時是需要打印產品頁面。但是打印出來的版本和網頁上的版本不太一致，有些圖片不需要，網頁上以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 編輯過


全部評論1
	admin 2023年8月11日 18:31 在用c#實現打印功能時，我們可以將內容先轉化為網頁形式或者吧模板寫成固定的html格式，然后進行內容填充。在打印過程中，我們可以用到的函數： `//轉到某個網址 webBrowser.Navigate(""); //直接打印 webBrowser.Print(); //預覽 webBrowser.ShowPrintPreviewDialog(); //打印 webBrowser.ShowPrintDialog();` 該評論在 2023/8/11 18:31:51 編輯過

91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

【C#】利用WebBrowser、CSS、JS控制開發HTML網頁文件的打印版

全部評論1