前端js打印网页内容

原创于 2020-06-23 17:05:11 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页局部打印的方法，通过设置开始和结束标签来定义打印区域，适用于需要精确控制打印内容的场景。

<div>
    <!--startprint-->
    <!--打印内容开始-->
    开始和结束标签内就是需要打印的内容<br>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" /><br>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" /><br>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" /><br>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
    <!--打印内容结束-->
    <!--endprint-->
</div>
<input type="button" id="bt" onclick="javascript:doPrint()"   value="打印" />
<script language="javascript" type="text/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>