js设置打印前后函数

window.print() 实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的一个按钮,或一个链接里面调用罢了。事实上,很多用户都是采用这种方式打印,但是这种方式最致命的缺点是不能设置打印参数,比如纸型,页边距,选择打印机等等。

这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式,专门送去打印,打印后又处理回来。

function window.onbeforeprint() {
    //将一些不需要打印的隐藏
    //如:document.getElementById("div1").style.display="none";
}
function window.onafterprint() {
    //放开隐藏的元??
    //如:document.getElementById("div1").style.display="none";
}
通过这两个方法,就可以实现页面的局部打印
window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢?


=====================================================================================

首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印。

<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "";
var footstr = "";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print(); 
document.body.innerHTML = oldstr;
return false;
}
script>
<title>div printtitle>
head>

<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt"   onClick="printdiv('div_print');" value=" Print ">

<div id="div_print">

<h1 style="Color:Red">The Div content which you want to printh1>

div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
body>

html>

====================================================================================
如图,我们要打印主页面中 工单详情部分。 
但是由于要打印的部分有样式,并且表格太宽,如果 要直接打印的话,打出来的纸张上字太小且颜色模糊,不易查看。 

只要去掉样式,字体会变大,打印出来的效果要好的多。 
方案一:我们可以取出要打印的部分,将打印部分填充到弹出的新页面中,然后我就再打印弹出页面即可。 

这样做的话,有个缺陷,就是会先把要打印的页面显示出来,然后要用户再次点击打印按键,显示比较啰嗦蛮烦。 

方案二:可以在要打印的页面中,嵌入一隐藏的iframe,用于存放要打印的部分代码。 
我们点击打印按钮时,实际上是打印这个隐藏iframe的内容。 

打印页面代码 
查看文本打印?
  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>工单详细信息title>  
    <script type="text/javascript">  
        function printPage() {  
            //获取当前页的html代码  
            var bodyhtml = window.document.body.innerHTML;  
            //设置打印开始区域、结束区域  
            var startFlag = "";  
            var endFlag = "";  
            // 要打印的部分  
            var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),   
                    bodyhtml.indexOf(endFlag));  
            // 生成并打印ifrme  
            var syfPrint = document.frames[0];  
            syfPrint.document.body.innerHTML = printhtml;  
            syfPrint.document.execCommand("Print");  
        }  
    script>  
head>  
<body>  
    <div id="bd">  
        <div id="right_box">  
            <a href="#" onclick="javascript:history.back(1); event.returnValue=false">  
                    << 返回a><br />  
              
                //////////////////////要打印的内容部分//////////////////////<br />  
              
            <input type="button" value="打印" onClick="printPage()" />  

    div>  
    <iframe src="" width="0" height="0" frameborder="0">iframe>  
body>  
html>  

你可能感兴趣的:(JavaScript)