js實現列印的方式

2021-08-17 02:37:53 字數 1950 閱讀 8987

一.列印當前頁面指定元素中的內容

方式一:直接使用window.print();

(1)首先獲得元素的html內容(這裡建議如果有樣式最好是用內聯樣式的方式)

var newstr = document.getelementbyid(mydiv).innerhtml;//得到需要列印的元素html

(2)儲存當前頁面的整個html,因為window.print()列印操作是列印當前頁的所有內容,所以先將當前頁面儲存起來,之後便於恢復。

var oldstr = document.body.innerhtml;//儲存當前頁面的html

(3)把當前頁面替換為列印內容html

document.body.innerhtml = newstr;

(4)執行列印操作

window.print();

(5)還原當前頁面

document.body.innerhtml = oldstr;

方法例:

//mydiv為需要列印的元素id

function printpage(mydiv)

方式二:window.open("",..)新開瀏覽器對話方塊列印。

(1)獲得需要列印的元素html

var printhtml = document.getelementbyid("mydiv").innerhtml;//這個元素的樣式需要用內聯方式,不然在新開列印對話方塊中沒有樣式

(2)開啟乙個視窗,且內容設定為空。

var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, *******=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

(3)將新視窗內容填充為需要列印的html內容

wind.document.body.innerhtml = printhtml;

(4)列印

wind.print();

方法例:

//mydiv為需要列印的元素id

function printpage(mydiv)

二、列印通過url獲取的內容

直接使用

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

wind.print();

對方url返回的所有內容都會被列印,,,如果知道需要列印指定內容的id,可以先將頁面獲取到,然後通過

一、中的方式列印。

即可列印;

三、功能實現總結

我做這個列印是為了列印乙個面單就像包裹上面貼的,有收寄資訊,公司log,

1.經過測試,如果使用火狐瀏覽器,有可能會變模糊(不排除是因為我操作方法沒對),但是同樣的操作在其他瀏覽器,比如google沒有出現。(有些差異,用不同瀏覽器執行即可看出)

2.如果頁面是自己系統直接列印還好。如果是為了給別人提供介面,讓對方獲得頁面內容而列印,那麼,頁面中的路徑一定要帶http字首,不然在對方網域名稱下就沒有對應。

3.列印有可能有頁首頁尾,這個解決方法是 換合適的瀏覽器,比如google呼叫列印的時候就沒有頁首頁尾,遨遊瀏覽器提供了顯示選擇。

3.尺寸不對應,因為頁面是用畫素布局,而列印是用的公釐之類的單位,這個是沒法進行換算的,跟顯示器有關,但是我們只要控制好整體長寬比就好,具體大小就無所謂了。然後列印時,比如遨遊瀏覽器,就可以設定列印比例(其他瀏覽器應該都可以)。根據實際需求調整即可。

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

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

js列印功能的實現(通用)

業務需求 基於bootstrap和layout的一套視覺化布局系統 用來自定義簡歷 在操作布局介面向預覽介面轉換時截一張預覽介面的儲存到後台。最終方案 在操作介面轉換為預覽介面時對螢幕進行截圖,然後用列印截圖取代之前的直接列印節點 截圖使用到html2canvas外掛程式 html2canvas p...

angular列印功能實現方式

目前主流的前端列印方式有兩種 一種是使用瀏覽器列印功能直接列印頁面,另一種是呼叫本地控制項實現。瀏覽器列印功能單一,不適用於複雜的業務表單,而列印控制項可以設計列印模板,實現複雜表單的列印,十分適合複雜的業務系統。下面為大家介紹angular中的這兩種列印。1 瀏覽器列印 這種方式在angular中...