window.print()局部打印三种方式(小结)

第window.print()局部打印三种方式(小结)目录方法一：通过开始、结束标记（startprint、endprint）来打印方法二：通过id选择器来替换内容打印，方法类似第一种方法三：通过动态创建iframe来打印（推荐的方法）（210616更新）190622更新说明：20250616更新说明：首先准备要打印的内容，也可以打印时再填充，html中定义如下：

!--startprint--

divid="printcontent"

${printContentBody}

/div

!--endprint--

方法一：通过开始、结束标记（startprint、endprint）来打印

functiondoPrint(){

bdhtml=window.document.body.innerHTML;

sprnstr="!--startprint--//开始打印标识字符串有17个字符

eprnstr="!--endprint--//结束打印标识字符串

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);//从开始打印标识之后的内容

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容

window.document.body.innerHTML=prnhtml;//把需要打印的指定内容赋给body.innerHTML

window.print();//调用浏览器的打印功能打印指定区域

window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；

returnfalse;

}

方法二：通过id选择器来替换内容打印，方法类似第一种

functiondoPrint2(){

if(getExplorer()=="IE"){

pagesetup_null();

//根据div标签ID拿到div中的局部内容

bdhtml=window.document.body.innerHTML;

varjubuData=document.getElementById("printcontent").innerHTML;

//把获取的局部div内容赋给body标签,相当于重置了body里的内容

window.document.body.innerHTML=jubuData;

//调用打印功能

window.print();

window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；

returnfalse;

functionpagesetup_null(){

varhkey_root,hkey_path,hkey_key;

hkey_root="HKEY_CURRENT_USER";

hkey_path="\\Software\\Microsoft\\InternetExplorer\\PageSetup\\";

try{

varRegWsh=newActiveXObject("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){}

functiongetExplorer(){

varexplorer=window.navigator.userAgent;

//ie

if(explorer.indexOf("MSIE")=0){

return"IE";

}

//firefox

elseif(explorer.indexOf("Firefox")=0){

return"Firefox";

}

//Chrome

elseif(explorer.indexOf("Chrome")=0){

return"Chrome";

}

//Opera

elseif(explorer.indexOf("Opera")=0){

return"Opera";

}

//Safari

elseif(explorer.indexOf("Safari")=0){

return"Safari";

}

}

方法三：通过动态创建iframe来打印（推荐的方法）（210616更新）

这里要注意判断iframe是否存在，防止反复使用时，iframe重复创建消耗内存

!doctypehtml

htmllang="en"

head

metacharset="UTF-8"

metaname="Generator"content="EditPlus®"

metaname="Author"content=""

metaname="Keywords"content=""

metaname="Description"content=""

titleDocument/title

/head

body

button打印/button

!--startprint--

divid="printcontent"

这里可以自己填充打印内容

/div

!--endprint--

scripttype='text/javascript'

functiondoPrint3(){

//判断iframe是否存在，不存在则创建iframe

variframe=document.getElementById("print-iframe");

if(!iframe){

varel=document.getElementById("printcontent");

iframe=document.createElement('IFRAME');

vardoc=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('stylemedia="print"@page{size:auto;margin:0mm;}/style//解决出现页眉页脚和路径的问题

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

对打印预览页面的居中或者横向、纵向设置可以参考这个链接：/ZHANGLIZENG/article/details/91865007

使用方法一、二时，弊端有2个：

1）由于替换来当前页面的内容，从而当取消打印时，会使原来的页面一些form表单失效。

2）当前页面中的样式会影响到打印的内容中的样式。

所以这里推荐使用iframe来创建，并且可以自定义样式。

以上内容在谷歌浏览器下测试通过，其他浏览器未做验证。

19