前端打印

前端js實現打印的幾種方式

一、基本原理

利用window對象自帶的print方法，將當前窗口內展示的內容打印出來。這裏的window包括以下幾種情況：

1. 當前默認的全局window對象.

2. 調用window.open方法返回的window對象.

3. iframe下的contentWindow對象.這個很好理解，contentWindow會繼承window對象的方法和屬性,因此也可以使用print方法.

二、實現方式

---

方法1：

要實現打印其實非常簡單，只需要調用window.print()就可以將當前頁面內容打印出來。當然打印出來內容和排版取決於當前頁面中展示的內容和樣式。代碼示例如下：

var printContent = `<span>這裏是打印內容</span><img src="url">` 

document.body.innerHtml = printContent;// 將window內容賦爲當前要打印的內容(一般是比較複雜的表單等樣式)

這樣實現起來比較簡單易懂，但是會有一個比較嚴重的問題。用戶往往只是想打印頁面內某部分的功能，並不想改變當前頁面展示的內容。爲了解決這種用戶體驗問題你需要變通一下，將打印之前的頁面內容先保存一下。

var targetContent = document.getElmentById("targetDom").innnerHtml; // 打印內容

var oldContent = document.body.innerHtml; // 打印前頁面內容

document.body.innerHtml = targetContent;

window.print();

document.body.innerHtml = oldContent; //恢復打印前頁面內容

這種方式基本滿足了我們的需求，打印之後用戶看到的還是之前展示的內容。當然，打印時頁面難免會閃一下。

---

方法2：

建立在方式一的基礎上我們會考慮，既然所有的window對象都有print方法，而調用當前window下的print方法又總需要將打印前的內容保存起來（這個內容有可能會很多，某些情況下我們其實並不希望觸發頁面的重新渲染）。既然如此，或許我們可以試試創建一個新的window對象。

var printWindow = window.open(url,'windowName', 'height=300, width=700,
top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=n o, status=no');

printWindow .print();

以上方法能幫助我們實現打印指定url地址中的內容。當然，這也需要我們預先將要打印的內容渲染在該url對應的頁面中。

方法3：

在嘗試過第二種打印方式後你會發現，其實在打印時平白無辜的爲用戶打開一個新的頁面也會讓人覺得不爽，最好的方式應該是頁面不做任何變化並且能夠實現打印我們想要的打印內容。如果是這樣的訴求的話，直接使用window.print是不再可靠的。不過好在iframe也是支持print方法的，這爲我們提供了很多方便.

function print (contentHtml){ // 傳入要打印的內容

var iframe = document.createElement("IFRAME");

// 隱藏iframe,只使用其打印功能
iframe.setAttribute('style', 'overflow:hidden;width:0px;height:0px; ');

document.body.appendChild(iframe);

var doc = iframe.contentWindow.document;

doc.write(contentHtml); //要打印區域中寫入要打印內容

doc.close(); // 某些瀏覽器中不關閉該區域的話無法調用print方法

iframe.contentWindow.focus();

iframe.contentWindow.print();

document.body.removeChild(iframe); 

}

方法4：

如果你覺得以上幾種方式都不是你想要的，沒關係，我們有基於jquery的更加強大穩定的打印插件 – jqprint.js

<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.jqprint-0.3.js"></script>
HTML代碼
<div id="ddd">
    <table>
        <tr>
            <td>這是打印的內容1</td>
            <td>這是打印的內容2</td>
            <td>這是打印的內容3</td>
            <td>這是打印的內容4</td>
            <td>這是打印的內容5</td>
        </tr>
    </table>
</div>

調用打印代碼:

$("#ddd").jqprint();

關於jqprint插件使用更加詳細的說明可以查看此鏈接:
jq打印插件之jqprint,在此我們就不再贅述了.

三、總結

對比一下幾種實現方式，個人比較傾向推薦使用iframe和jqprint來實現，從靈活性上來說iframe會更好一點，兼容性上來看的話jqprint明顯會更好一點。