页面打印方法

最新推荐文章于 2022-05-20 10:47:02 发布

ityangs

最新推荐文章于 2022-05-20 10:47:02 发布

阅读量4.6k

点赞数 1

分类专栏： WEB前端 JS 打印网页文章标签： javascript 打印网页局部打印分页

本文链接：https://blog.csdn.net/ITYang_/article/details/74729437

版权

WEB前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

打印网页

1 篇文章 0 订阅

订阅专栏

使用说明：

1、浏览器内部打印，就是打印整个页面，除了加class=”noprint”的内容
2、JS局部打印内容1，就是打印包含在startprint1和endprint1之间的内容，除了加class=”noprint”的内容
3、JS局部打印内容2，就是打印就是打印包含在startprint2和endprint2之间的内容，除了加class=”noprint”的内容
4、加class=”page-next”的div说明在此处分页

<html>

    <head>
        <title>javascript打印-打印页面设置-打印预览代码</title>
        <meta http-equiv=content-type content="text/html; charset=utf-8" />
    </head>
    <!--打印时不显示类-->
    <style type="text/css" media="print">
        .noprint {
            display: none
        }

    </style>
    <!--打印分页时的样式类-->
    <style  type="text/css">
        .page-next{
            page-break-after: always;
        }
    </style>
    <body>

        <input id="btnPrint" type="button" value="浏览器内部打印" onclick="javascript:window.print();" />
        <input id="btnPrint" type="button" value="JS局部打印内容1" onclick=preview(1) />
        <input id="btnPrint" type="button" value="JS局部打印内容2" onclick=preview(2) />
        <div class="noprint">
            class为noprint时：所有打印时不显示
        </div>
        <div>没有包含startprint和endprint，js打印将不会打印，但浏览器内部打印会打印此部分</div>


        <!--startprint1-->
        <hr/>
        <div class="noprint">
            class为noprint时：所有打印时不显示
        </div>
        要打印的内容：内容1 <br/>
        要打印的内容：内容1 <br/>
        要打印的内容：内容1 <br/> 
        要打印的内容：内容1 <br/> 
        要打印的内容：内容1 <br/> 
        <div class="page-next">1/2</div>
        要打印的内容：内容1 <br/> 
        要打印的内容：内容1 <br/> 
        要打印的内容：内容1 <br/>

        <!--endprint1-->

        <!--startprint2-->
        <hr/>
        <div class="noprint">
            class为noprint时：所有打印时不显示
        </div>
        要打印的内容：内容2
        <!--endprint2-->

    </body>

    <script>
        function preview(oper) {
            if(oper < 100) {
                bdhtml = window.document.body.innerHTML; //获取当前页的html代码
                sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
                eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
                prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
                prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
                window.document.body.innerHTML = prnhtml;
                window.print();
                window.document.body.innerHTML = bdhtml;
            } else {
                window.print();
            }
        }
    </script>

</html>

资源下载

ityangs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面打印方法

使用说明： 1、浏览器内部打印，就是打印整个页面，除了加class=”noprint”的内容 2、JS局部打印内容1，就是打印包含在startprint1和endprint1之间的内容，除了加class=”noprint”的内容 3、JS局部打印内容2，就是打印就是打印包含在startprint2和endprint2之间的内容，除了加class=”noprint”的内容 4、加
复制链接

扫一扫

专栏目录