日期:2014-05-16  浏览次数:20453 次

JS 打印方法小结

JS 实现打印网页中的部分内容:

<script language=javascript> 
 function doPrint() { 
      bdhtml=window.document.body.innerHTML; //获取当前页的HTML代码
    sprnstr="<!--startprint-->"; //设置打印开始区域
      eprnstr="<!--endprint-->"; //设置打印结束区域
      prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html 
      prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从结束代码向前取html 
      window.document.body.innerHTML=prnhtml; 
      window.print(); 
 } 
</script> 

?<!--startprint--> <!--endprint--> 分别为需要打印内容的起始和终止位置;

在打印的button下直接调用doPrint()方法即可实现打印。

不过此方法的打印为在本页面打开打印预览进行打印的,可能不适用于某些网站的需求。不过此方法可以作为基础,在其上改进。

?

ie自带的有Active控件,但火狐不支持。使用的是js操作dom方法对窗体指定标记内文字进行打印,所以使用时需要定义相关的标签及其样式(文字大小、字体之类)。

<script type="text/javascript"> 
///*********************** 
///打印指定区域页面 
///说明:obj–通过getElementById或其它方式获取标签标识,打印此obj内的文字 
function startPrint(obj) 
{ 
var oWin=window.open("","_blank"); 
var strPrint="<h4 style='font-size:18px; text-align:center;'>打印预览区</h4>\n"; 

strPrint=strPrint + "<script type=\"text/javascript\">\n"; 
strPrint=strPrint + "function printWin()\n"; 
strPrint=strPrint + "{"; 
strPrint=strPrint + "var oWin=window.open(\"\",\"_blank\");\n"; 
strPrint=strPrint + "oWin.document.write(document.getElementById(\"content\").innerHTML);\n"; 
strPrint=strPrint + "oWin.focus();\n"; 
strPrint=strPrint + "oWin.document.close();\n"; 
strPrint=strPrint + "oWin.print()\n"; 
strPrint=strPrint + "oWin.close()\n"; 
strPrint=strPrint + "}\n"; 
strPrint=strPrint + "<\/script>\n"; 

strPrint=strPrint + "<hr size='1′ />\n"; 
strPrint=strPrint + "<div id=\"content\">\n"; 
strPrint=strPrint + obj.innerHTML + "\n"; 
strPrint=strPrint + "</div>\n"; 
strPrint=strPrint + "<hr size='1′ />\n"; 
strPrint=strPrint + "<div style='text-align:center'><button onclick='printWin()' style='padding-left:4px;padding-right:4px;'>打 印</button><button onclick='window.opener=null;window.close();' style='padding-left:4px;padding-right:4px;'>关 闭</button></div>\n"; 
oWin.document.write(strPrint); 
oWin.focus(); 
oWin.document.close(); 
} 
</script> 

?

<button id="btnPrint" onclick="startPrint(document.getElementById('content'))">打印内容</button> 
<div id="content"> 
<div style="font-size:12px;color:#333;"> 
这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容 
</div> 
</div>

?这种方法可以新打开打印预览页面再进行打印。至少比较适合我

?

我将以上两种方法糅合到一起,实现在新窗口展示部分网页内容的打印预览页面。

function doPrint() {
	var oWin=window.open("","_blank");
	bdhtml=window.document.body.innerHTML;
	sprnstr="<!--startprint-->";
	eprnstr="<!--endprint-->";
	prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
	oWin.document.write(prnhtml);
	oWin.focus();
	oWin.document.close();
	oWin.print(); 
	oWin.close(); 
}

?

还有其他的方法,本人没有尝试过,不过先放于此,备用。

?

页脚和页眉 横向和纵向之分怎么办? 就是用到打印预览,因为它里面有设置
这时必须引用IE的一个控件"WebBrowser"
在页面里引用:
<object id="WebBrowser" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
</object>
其控件方法:


?

WebBr