網頁列印的簡單實現 + window.print

阿新 • • 發佈：2019-01-10

網頁列印的簡單實現

最經在做一個web小專案的時候，需要從網頁中打印出表格資料。
由於是第一次接觸網頁列印，所以從網路搜尋了很久，鑑於專案要求的列印功能比較簡單，最終放棄了諸多的開源專案，而是選擇了利用HTML+CSS實現列印功能。

列印整個網頁頁面
這種列印沒什麼可說的，目前主流瀏覽器幾乎都支援列印功能。一般在可列印頁面中，在網頁空白處點選滑鼠右鍵，在顯示的選項中會出現“列印”選項，點選“列印”選項就會開啟列印介面。
這裡寫圖片描述

* 列印頁面中的部分內容*
我專案的列印功能採用的是CSS中的media標籤的print屬性來實現的。
關於media標籤的其它屬性介紹可從網路獲取，大致去了解一下，這裡就不多言了。
@media print的使用如下：

<style type="text/css" media="print">
    h1,button {color:#888}
    .title{font-size:14pt}
</style>

在使用上和一般的CSS樣式沒有什麼大的區別，只不過多設定了一項media。
設定了print屬性的樣式表中的樣式，對網頁的顯示沒有影響，其只是對頁面的列印效果進行處理。
在列印樣式中可以對列印效果的字型字號、背景色、內容顯示等進行設定，與CSS相同。
在這些設定中，visibility屬性和display屬性是我最為需要的。
visibility:hidden 和 display:none 這兩個屬性設定都可以實現網頁部分列印的功能。其中，前者僅僅是隱藏相應標籤元件，但其顯示區域依然被其佔有，顯示為大片空白；後者則使標籤元件不可見和不可知，相當於從網頁中將元件刪去了。
以下為使用例項。
一個簡單的測試網頁程式碼：

<html>
<head>
<meta charset="UTF-8">
<title>Print Page</title>
<style type="text/css" media="print">
    <!-- 列印屬性設定區域 -->
</style>
</head>
<body>
<H1>Hello Boy!</H1>
<h2>Hello Girl!</h2>
<H3>Hello Everyone!</H3 
>
<table>
    <tr>
        <th>name</th>
        <th>age</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>20</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>33</td>
    </tr>
</table>
</body>
</html>

將這種正常情況下的列印效果定為1；
將在原始程式碼基礎上設定列印屬性

h2,h3{visibility:hidden}

後的列印效果記為2；
將在原始程式碼基礎上設定列印屬性

h2,h3{display:none}

後的列印效果記為3。
以下分別文1、2、3效果的截圖：
效果1：
這裡寫圖片描述

效果2：
這裡寫圖片描述

效果3：
這裡寫圖片描述

從上可以很明顯的看出二者的區別。

最後再介紹一下利用javascript函式進行列印，js的列印函式為window.print()，我們可以在網頁中想要的地方新增這個列印的提示及處理。比如，在表格上面新增一個列印的超連結提示。

<a href="#" onclick="window.print()">列印</a>

好了，關於簡單列印網頁的介紹就差不多了。利用CSS標籤進行列印的一個缺點就是一定會彈出列印的提示框，如果專案中不方便或者不能彈出列印提示框，那麼可以使用相應的開源專案來實現列印功能。

專案時間匆忙，寫得比較倉促，難免出現紕漏，如有發現，勞煩告知，謝謝。

網頁列印的簡單實現 + window.print