js设置打印前后函数

最新推荐文章于 2024-05-27 16:13:02 发布

Ctrain

最新推荐文章于 2024-05-27 16:13:02 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Ctrain/article/details/70036999

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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 = "<html><head><title></title></head><body>";
var footstr = "</body>";
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 print</title>
</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 print</h1>

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

</html>

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

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

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

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

打印页面代码 
查看文本打印?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
        "http://www.w3.org/TR/html4/loose.dtd">  
<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 = "<!--startprint-->";  
            var endFlag = "<!--endprint-->";  
            // 要打印的部分  
            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 />  
            <!--startprint-->  
                //要打印的内容部分//<br />  
            <!--endprint-->  
            <input type="button" value="打印" onClick="printPage()" />  

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

Ctrain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js设置打印前后函数

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

扫一扫