JavaScript 實現打印操作


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

方式一:直接使用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){   
var newstr = document.getElementById(myDiv).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

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

(1)獲得需要打印的元素HTML

var printHtml = document.getElementById("myDiv").innerHTML;//這個元素的樣式需要用內聯方式,不然在新開打印對話框中沒有樣式

(2)打開一個窗口,且內容設置為空。

var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=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){   
var printHtml = document.getElementById(myDiv).innerHTML;

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

wind.document.body.innerHTML = printHtml;

wind.print();
return false;
}

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

直接使用

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

wind.print();

對方url返回的所有內容都會被打印,,,如果知道需要打印指定內容的ID,可以先將頁面獲取到,然后通過一、中的方式打印。

即可打印;

三、功能實現總結

我做這個打印是為了打印一個面單就像包裹上面貼的,有收寄信息,公司log圖片,

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

2.如果頁面是自己系統直接打印還好。如果是為了給別人提供接口,讓對方獲得頁面內容而打印,那么,頁面中的路徑一定要帶http前綴,不然在對方域名下就沒有對應圖片。

3.打印有可能有頁眉頁腳,這個解決方法是 換合適的瀏覽器,比如google調用打印的時候就沒有頁眉頁腳,遨游瀏覽器提供了顯示選擇。

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

其他疑問:

1.有更好的方式比如有個 css的打印媒體類型(這個我不太懂,也沒多了解)等更好的解決前端打印需求的,還請多多交流補充。

2.是否可以通過JS直接控制打印比例,和打印的頁面去留。(我沒有找到合適有效的方法)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM