結(jié)合設(shè)計(jì)經(jīng)驗(yàn)與營銷實(shí)踐,提供有價(jià)值的互聯(lián)網(wǎng)資訊
發(fā)布日期:2019-07-11瀏覽次數(shù):1523 來源:福州網(wǎng)站建設(shè)
一.打印當(dāng)前頁面指定元素中的內(nèi)容
方式一:直接使用window.print();
(1)首先獲得元素的html內(nèi)容(這里建議如果有樣式最好是用內(nèi)聯(lián)樣式的方式)
var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML
(2)保存當(dāng)前頁面的整個(gè)html,因?yàn)閣indow.print()打印操作是打印當(dāng)前頁的所有內(nèi)容,所以先將當(dāng)前頁面保存起來,之后便于恢復(fù)。
var oldstr = document.body.innerHTML;//保存當(dāng)前頁面的HTML
(3)把當(dāng)前頁面替換為打印內(nèi)容HTML
document.body.innerHTML = newstr;
(4)執(zhí)行打印操作
window.print();
(5)還原當(dāng)前頁面
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("",..)新開瀏覽器對(duì)話框打印。
(1)獲得需要打印的元素HTML
var printHtml = document.getElementById("myDiv").innerHTML;//這個(gè)元素的樣式需要用內(nèi)聯(lián)方式,不然在新開打印對(duì)話框中沒有樣式
(2)打開一個(gè)窗口,且內(nèi)容設(shè)置為空。
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)將新窗口內(nèi)容填充為需要打印的HTML內(nèi)容
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獲取的內(nèi)容
直接使用
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();
對(duì)方url返回的所有內(nèi)容都會(huì)被打印,,,如果知道需要打印指定內(nèi)容的ID,可以先將頁面獲取到,然后通過一、中的方式打印。
即可打??;
三、功能實(shí)現(xiàn)總結(jié)
我做這個(gè)打印是為了打印一個(gè)面單就像包裹上面貼的,有收寄信息,公司log圖片,
1.經(jīng)過測(cè)試,如果使用火狐瀏覽器,有可能圖片會(huì)變模糊(不排除是因?yàn)槲也僮鞣椒]對(duì)),但是同樣的操作在其他瀏覽器,比如google沒有出現(xiàn)。(有些差異,用不同瀏覽器執(zhí)行即可看出)
2.如果頁面是自己系統(tǒng)直接打印還好。如果是為了給別人提供接口,讓對(duì)方獲得頁面內(nèi)容而打印,那么,頁面中的路徑一定要帶http前綴,不然在對(duì)方域名下就沒有對(duì)應(yīng)圖片。
3.打印有可能有頁眉頁腳,這個(gè)解決方法是 換合適的瀏覽器,比如google調(diào)用打印的時(shí)候就沒有頁眉頁腳,遨游瀏覽器提供了顯示選擇。
3.尺寸不對(duì)應(yīng),因?yàn)轫撁媸怯孟袼夭季郑蛴∈怯玫暮撩字惖膯挝?,這個(gè)是沒法進(jìn)行換算的,跟顯示器有關(guān),但是我們只要控制好整體長寬比就好,具體大小就無所謂了。然后打印時(shí),比如遨游瀏覽器,就可以設(shè)置打印比例(其他瀏覽器應(yīng)該都可以)。根據(jù)實(shí)際需求調(diào)整即可。
其他疑問:
1.有更好的方式比如有個(gè) css的打印媒體類型(這個(gè)我不太懂,也沒多了解)等更好的解決前端打印需求的,還請(qǐng)多多交流補(bǔ)充。
2.是否可以通過JS直接控制打印比例,和打印的頁面去留。(我沒有找到合適有效的方法)
以上是由福州網(wǎng)站建設(shè)的小編為你分享了"JavaScript 實(shí)現(xiàn)打印指定內(nèi)容操作"文章,如果你在這方面有什么問題,隨時(shí)聯(lián)系我們