JS實現瀏覽器列印 列印預覽

2021-07-27 12:43:57 字數 1944 閱讀 7783

目前正在做瀏覽器端採用js方式實現列印這麼乙個功能，js列印實現的方法很多，但是相容各個瀏覽器實現列印預覽的功能有些棘手，現將實現的內容及遇到的問題記錄下來，希望有大牛看到所提的問題後可以給予解答，在此感謝啦。

window.print();會彈出列印對話方塊，列印的是window.document.body.innerhtml中的內容，下面是從網上摘到的乙個區域性列印的例子，該例子的不足是列印會修改頁面的內容。

1不需要列印的地方


2這裡不要列印啊


列印內容~~


列印不列印的地方啊哈哈哈哈
這種方式是其只相容ie，其他瀏覽器不可使用，同時ie10以下的瀏覽器才可以使用，呼叫方式如下：
這種方式優勢是在ie下可以彈出列印預覽，這是列印很人性化的功能，但是遺憾的是高版本的ie瀏覽器不支援webbrowser了

該方式也相容各個版本的瀏覽器，同window.print()一樣，其啟動的是列印對話方塊，chrome的列印對話方塊自帶預覽功能，但是ie、火狐僅僅只彈出列印設定對話方塊，沒有預覽功能。

使用jquery瀏覽外掛程式可以很方便的進行區域性列印，常用的外掛程式有： 

列印
該方式需要使用者瀏覽器安裝相關的第三方外掛程式，使用者體驗不好，故在此不細述了。

chrome瀏覽器、win10自帶的ie瀏覽器 呼叫列印彈出的列印設定介面中包含列印預覽部分，故其通過上面的列印函式的呼叫即可實現。

ie9以後的版本、火狐不支援webbrowser控制項了，js呼叫不了瀏覽器的列印預覽的功能，我們只能用iframe模擬列印預覽的對話方塊，將需要列印的內容顯示在該對話方塊中，然後在呼叫列印的功能實現列印。

其實現的效果如下圖（其自動的示例**）

ie8及以下版本可以呼叫webbrowser.execwb(7,1) 函式彈出瀏覽器的列印預覽對話方塊，採用該函式的好處是 使用者可以在列印預覽對話方塊中 調整頁邊距、頁首、頁尾；

下面貼出的是設定頁邊距、頁首、頁尾的js**

//取得頁面列印設定的原引數資料   


function pagesetup_temp()   


catch(e)   


}   


//設定網頁列印的頁首頁尾和頁邊距，登錄檔裡的單位是英吋，列印設定中是公釐，1英吋=25.4公釐   


function pagesetup_null()   


catch(e)   


}   


//設定網頁列印的頁首頁尾和頁邊距為預設值   


function pagesetup_default()   


catch(e)   


}
使用該函式，會彈出

通過網頁修改activex安全設定，新增信任站點，禁用該彈出視窗提示，**如下：

function activexcontrol()catch(e)   


}
1）網頁修改activex安全設定該段**也是必須在啟用activex的條件下呼叫成功，是需要使用者在internet的配置項中設定的(如下圖），如何才能自動啟用該外掛程式？

2) chrome、火狐如何通過js設定頁邊距、頁首、頁尾?

3) ie高版本瀏覽器、火狐如何通過js彈出瀏覽器自己的列印預覽?

JS實現瀏覽器列印 列印預覽示例

1.js實現列印的方式 方式一 window.print window.print 會彈出列印對話方塊，列印的是window.document.body.innerhtml中的內容，下面是從網上摘到的乙個區域性列印的例子，該例子的不足是列印會修改頁面的內容。1不需要列印的地方 2這裡不要列印啊 列印...

js實現列印 列印預覽 列印設定

一 webbrowser控制項 二 webbrowder控制項的方法 列印 webbrowser1.execwb 6,1 列印設定 webbrowser1.execwb 8,1 列印預覽 webbrowser1.execwb 7,1 關於這個元件還有其他的用法，列舉如下 webbrowser.exe...

前端js瀏覽器列印

window.print 是呼叫瀏覽器列印的方法。但預設是列印window當前所在頁的整個頁面，那有沒有辦法，只列印某一塊區域，或者說，只列印某乙個dom元素內的元素呢。function browserprint dom const printdom window.document.geteleme...