window.print()局部打印三種方式(小結(jié))
更新時(shí)間：2022年06月30日 09:20:10 作者：硅谷工具人
本文主要介紹了window.print()局部打印三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先準(zhǔn)備要打印的內(nèi)容，也可以打印時(shí)再填充，html中定義如下：
<!--startprint-->
<div id="printcontent" style="display:none">
${printContentBody}
</div>
<!--endprint-->方法一： 通過開始、結(jié)束標(biāo)記（startprint、endprint）來打印
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->"; //開始打印標(biāo)識(shí)字符串有17個(gè)字符
eprnstr="<!--endprint-->"; //結(jié)束打印標(biāo)識(shí)字符串
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //從開始打印標(biāo)識(shí)之后的內(nèi)容
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取開始標(biāo)識(shí)和結(jié)束標(biāo)識(shí)之間的內(nèi)容
window.document.body.innerHTML=prnhtml; //把需要打印的指定內(nèi)容賦給body.innerHTML
window.print(); //調(diào)用瀏覽器的打印功能打印指定區(qū)域
window.document.body.innerHTML=bdhtml;//重新給頁面內(nèi)容賦值；
return false;
}方法二：通過id選擇器來替換內(nèi)容打印，方法類似第一種
function doPrint2(){
if(getExplorer() == "IE"){
pagesetup_null();
}
//根據(jù)div標(biāo)簽ID拿到div中的局部內(nèi)容
bdhtml=window.document.body.innerHTML;
var jubuData = document.getElementById("printcontent").innerHTML;
//把獲取的 局部div內(nèi)容賦給body標(biāo)簽, 相當(dāng)于重置了 body里的內(nèi)容
window.document.body.innerHTML= jubuData;?
//調(diào)用打印功能
window.print();
window.document.body.innerHTML=bdhtml;//重新給頁面內(nèi)容賦值；
return false;
}
function pagesetup_null(){?????????????? ?
??? var hkey_root,hkey_path,hkey_key;
??? hkey_root="HKEY_CURRENT_USER";
??? hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
??? try{
??????? var RegWsh = new ActiveXObject("WScript.Shell");
??????? hkey_key="header";
??????? RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
??????? hkey_key="footer";
??????? RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
??? }catch(e){}
}
function getExplorer() {
??? var explorer = window.navigator.userAgent ;
??? //ie
??? if (explorer.indexOf("MSIE") >= 0) {
??????? return "IE";
??? }
??? //firefox
??? else if (explorer.indexOf("Firefox") >= 0) {
??????? return "Firefox";
??? }
??? //Chrome
??? else if(explorer.indexOf("Chrome") >= 0){
??????? return "Chrome";
??? }
??? //Opera
??? else if(explorer.indexOf("Opera") >= 0){
??????? return "Opera";
??? }
??? //Safari
??? else if(explorer.indexOf("Safari") >= 0){
??????? return "Safari";
??? }
}方法三：通過動(dòng)態(tài)創(chuàng)建iframe來打印（推薦的方法）（210616更新）
這里要注意判斷iframe是否存在，防止反復(fù)使用時(shí)，iframe重復(fù)創(chuàng)建消耗內(nèi)存
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<button onclick="doPrint3()">打印</button>
<!--startprint-->
<div id="printcontent" style="display:none">
這里可以自己填充打印內(nèi)容
</div>
<!--endprint-->
<script type='text/javascript'>
function doPrint3(){
//判斷iframe是否存在，不存在則創(chuàng)建iframe
var iframe=document.getElementById("print-iframe");
if(!iframe){
var el = document.getElementById("printcontent");
iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute("id", "print-iframe");
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//這里可以自定義樣式
doc.write('<style media="print">@page {size: auto;margin: 0mm;}</style>'); //解決出現(xiàn)頁眉頁腳和路徑的問題
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
}
setTimeout(function(){ iframe.contentWindow.print();},50) //解決第一次樣式不生效的問題
if (navigator.userAgent.indexOf("MSIE") > 0){
document.body.removeChild(iframe);
}
}
</script>
</body>
</html>對打印預(yù)覽頁面的居中或者橫向、縱向設(shè)置可以參考這個(gè)鏈接：https://blog.csdn.net/ZHANGLIZENG/article/details/91865007
使用方法一、二時(shí)，弊端有2個(gè)：
1）由于替換來當(dāng)前頁面的內(nèi)容，從而當(dāng)取消打印時(shí)，會(huì)使原來的頁面一些form表單失效。
2）當(dāng)前頁面中的樣式會(huì)影響到打印的內(nèi)容中的樣式。
所以這里推薦使用iframe來創(chuàng)建，并且可以自定義樣式。
以上內(nèi)容在谷歌瀏覽器下測試通過，其他瀏覽器未做驗(yàn)證。
190622更新說明：
看到兩個(gè)伙伴留言，我說說后面發(fā)生的事兒吧，我當(dāng)時(shí)做的是電子面單的打印，但是發(fā)現(xiàn)第三種方法打印出的電子面單的條碼還是不太清洗，字體偏淡。
所以最后也沒有用第三種方法，直接使用lodop來打印了。
但是本身第三種方法測試是可行的。
20210616更新說明：
結(jié)合評論中的反饋，針對第三種方式解決了頁眉頁腳顯示的問題、第一次出現(xiàn)樣式不生效的問題。
到此這篇關(guān)于window.print()局部打印三種方式(小結(jié))的文章就介紹到這了,更多相關(guān)window.print()局部打印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Active控件問題小結(jié)(附解決辦法)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
使用微信小程序開發(fā)彈出框應(yīng)用實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了使用微信小程序開發(fā)彈出框功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)模板,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了一文搞懂Map與Set的用法和區(qū)別,文章開頭給大家介紹了map和set的基本概念，了解這些基礎(chǔ)知識(shí)能夠幫助我們更好的使用，需要的朋友可以參考下2022-06-06
JavaScript中三種非破壞性處理數(shù)組的方法比較
在這篇文章中，我們將會(huì)探索處理數(shù)組的三種方法：for…of循環(huán)、數(shù)組方法.reduce()和數(shù)組方法.flatMap()，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-06-06
Javascript實(shí)現(xiàn)返回上一頁面并刷新的小例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)返回上一頁面并刷新的小例子，有需要的朋友可以參考一下2013-12-12
ionic2打包android時(shí)gradle無法下載的解決方法
這篇文章主要為大家詳細(xì)介紹了ionic2打包android時(shí)gradle無法下載的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
js定時(shí)器怎么寫？就是在特定時(shí)間執(zhí)行某段程序
定時(shí)器想必大家并不陌生吧，在本文為大家詳細(xì)介紹下js中是如何實(shí)現(xiàn)定時(shí)器的，具體原理及代碼如下，感興趣的朋友不要錯(cuò)過2013-10-10
JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類,本文直接給出demo代碼,需要的朋友可以參考下2015-03-03
javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-12