网页打印指定范围内容小结

第一种方法：使用CSS

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

代码如下：

<style media="print" type="text/css"> 
    .noprint{visibility:hidden} 
</style>
<p>这里是要打印的内容。</p>
<p class="noprint">这里是不打印的内容。</p>
<a href="javascrīpt:window.print()" target="_self">打印</a>

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

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

代码如下：

<span id="div1">这里是要打印的内容</span>
<p>所有内容</p>
<div id="div2">div2的内容</div>
<a href="javascrīpt:printme()" target="_self">打印</a>
<script language="javascript">
    function printme(){
        //保存原来页面到变量
        let oldContent = document.body.innerHTML;
        document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
        window.print();
        window.location.reload();
        //将变量还原到原来页面
        document.body.innerHTML = oldContent;
    }
</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调整或容器包容 打印容器内的内容就可以了