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彈出瀏覽器自己的打印預覽?


相關經驗推薦