1. 首頁 > 生活經驗 > >

JS實現瀏覽器打印了嗎？打印預覽分享

目前正在做瀏覽器端采用JS方式實現打印這么一個功能，JS打印實現的方法很多，但是兼容各個瀏覽器實現打印預覽的功能有些棘手 ， 現將實現的內容及遇到的問題記錄下來 ， 希望有大?？吹剿岬膯栴}后可以給予解答，在此感謝啦 。
1.JS實現打印的方式

方式一：window.print()

window.print();會彈出打印對話框，打印的是window.document.body.innerHTML中的內容，下面是從網上摘到的一個局部打印的例子，該例子的不足是打印會修改頁面的內容 。

JS實現瀏覽器打印了嗎？打印預覽分享

方式二：使用html 標簽引入Webbrowser控件

這種方式是其只兼容IE，其他瀏覽器不可使用 ， 同時IE10以下的瀏覽器才可以使用，調用方式如下：
JS實現瀏覽器打印了嗎？打印預覽分享

這種方式優勢是在IE下可以彈出打印預覽，這是打印很人性化的功能，但是遺憾的是高版本的IE瀏覽器不支持WebBrowser了
方式三：采用document.execCommand(”print”)

該方式也兼容各個版本的瀏覽器 ， 同window.print()一樣，其啟動的是打印對話框，chrome的打印對話框自帶預覽功能 ， 但是IE、火狐僅僅只彈出打印設置對話框，沒有預覽功能 。
方式四：采用JQuery插件

使用jQuery瀏覽插件可以很方便的進行局部打印，常用的插件有：
1)jquery.print.js
2)jquery.print-preview.js
這兩種方式使用都很簡單，1）通過$("#id").print(/*options*/);調用；2）通過$('#id').printArea(/*options*/); 其中的option可選項可以在下載地址下載下來后看示例代碼 ， 一般options不用傳即可，示例代碼如下：
JS實現瀏覽器打印了嗎？打印預覽分享

方式五：采用瀏覽器打印第三方插件

該方式需要用戶瀏覽器安裝相關的第三方插件，用戶體驗不好，故在此不細述了 。

2.打印預覽

chrome瀏覽器、win10自帶的IE瀏覽器 調用打印彈出的打印設置界面中包含打印預覽部分 ， 故其通過上面的打印函數的調用即可實現 。
IE9以后的版本、火狐不支持webbrowser控件了，JS調用不了瀏覽器的打印預覽的功能 ， 我們只能用iframe模擬打印預覽的對話框，將需要打印的內容顯示在該對話框中 ， 然后在調用打印的功能實現打印 。
1）jquery打印預覽插件

jquery.print-preview.js
其實現的效果如下圖（其自動的示例代碼）
JS實現瀏覽器打印了嗎？打印預覽分享

JS實現瀏覽器打印了嗎？打印預覽分享

2）webbrowser控件打印預覽

IE8及以下版本可以調用WebBrowser.ExecWB(7,1) 函數彈出瀏覽器的打印預覽對話框，采用該函數的好處是 用戶可以在打印預覽對話框中 調整頁邊距、頁眉、頁腳；
【JS實現瀏覽器打印了嗎？打印預覽分享】下面貼出的是設置頁邊距、頁眉、頁腳的JS代碼


JS實現瀏覽器打印了嗎？打印預覽分享


JS實現瀏覽器打印了嗎？打印預覽分享

使用該函數，會彈出
JS實現瀏覽器打印了嗎？打印預覽分享

JS實現瀏覽器打印了嗎？打印預覽分享

通過網頁修改activex安全設置，添加信任站點，禁用該彈出窗口提示，代碼如下：
JS實現瀏覽器打印了嗎？打印預覽分享

3.問題
1)網頁修改activex安全設置該段代碼也是必須在啟用ActiveX的條件下調用成功，是需要用戶在Internet的配置項中設置的(如下圖)，如何才能自動啟用該插件?
JS實現瀏覽器打印了嗎？打印預覽分享

JS實現瀏覽器打印了嗎？打印預覽分享

2) chrome、火狐如何通過JS設置頁邊距、頁眉、頁腳?
3) IE高版本瀏覽器、火狐如何通過JS彈出瀏覽器自己的打印預覽?


相關經驗推薦