JS页面打印指定DIV区域功能

点击按钮后就可以直接打印预览，并且隐藏了按钮，如果你不希望按钮显示，可以把那部分代码删除就可以了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>打印预览</title>
</head>

<body>
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WindowPrint" name="WindowPrint" width="0"></OBJECT>

<script language="javascript" type="text/javascript">
function printpreview()
{
    WindowPrint.execwb(7,1);
}
</script>

<input type="button"　name="Btn_printPreviw" value="打印预览" onclick="javascript:this.style.display='none';printpreview();" />

</body>
</html>

 

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

打印web页面指定区域的三种方法

本文和大家分享一下web页面实现指定区域打印功能的三种方法，一起来看下吧。

第一种方法：使用CSS

　　定义一 个.noprint的class，将不打印的内容放入这个class内。

　　代码如下：

<style media="print" type="text/css">
.noprint{visibility:hidden}
</style>
这里是要打印的内容。
<p class="noprint">这里是不打印的内容。</p>
<div class="noprint"><input type="button" style="width:80px;height:35px" onclick="printDIV()" value="点击打印" /></div>
<div>这====里是要打印的内容。</div>



第二种方法：指定打印区域

　 　把要打印的内容放入一个span或div，然后通过一个函数打印。

　　代码如下：

<span id="div1">这里是要打印的内容</span& gt;
<p>所有内容</p>
<div id="div2">div2的内容</div& gt;
<a href="javascrīpt:printme()" target="_self">打印</a>
<script language="javascript">
function printme(){
   document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
   window.print();
}
</script>



　 　如果要打印的只是整个页面中的一小部分，最好采用第二种方法。

第三种方法：使用单独的页面打印

如果要打印的页面排版和原web页面相差很大，采用此种 方法。

点击打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新 窗口。

 

网页设计----打印网页指定区域

<script language=javascript>
function doPrint() { 
bdhtml=window.document.body.innerHTML; 
sprnstr="<!--startprint-->"; 
eprnstr="<!--endprint-->"; 
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
window.document.body.innerHTML=prnhtml; 
window.print(); 
window.document.body.innerHTML=bdhtml;
}
</script>

<!--startprint-->在需要打印的内容<!--endprint-->
<input type="button" onClick="doPrint()" value="打印" /> 

// 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容就可以了

 

出处：https://www.cnblogs.com/hubing/p/4310430.html

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

个人使用

我自己给小朋友打印描红使用的，如下代码：

<link href="http://www.maogang.com/css/css.css" rel="stylesheet">
<link href="http://www.maogang.com/Template/layui/css/layui.css" rel="stylesheet">
<link href="http://www.maogang.com/css/details.css" rel="stylesheet">
<link href="http://www.maogang.com/css/User/Copybook1.css" rel="stylesheet">

<script>

    function printDIV()
    {
        var oldstr = document.body.innerHTML;  
        document.body.innerHTML=document.getElementsByClassName("exhibition")[0].innerHTML;
        window.print();
        document.body.innerHTML =oldstr;
    }
            
    
</script>

<div style="display: flex;">
<div style="color:blue;width:1100px;">
首先，在http://www.maogang.com/details1网页上设置打印的字，并调整参数，这里只调整田字格宽度：1.3cm<br />
然后复制页面元素选择 &lt;div class="exhibition"&gt;放到下面，点击打印按钮，并在打印预览中设置缩放130%打印
</div>
<div style="background-color:green;width:100px;text-align: center;vertical-align: middle;">
    <button style="width:80px;height:35px" onclick="printDIV()">打印</button>
</div>
</div>

<div class="exhibition">
这里是要打印的内容。
</div>

 

posted on 2013-08-30 12:34  jack_Meng  阅读(18402)  评论(0)  编辑  收藏  举报

导航