html中打印部分内容，设置网页打印区域

最新推荐文章于 2024-03-21 10:27:19 发布

月小满

最新推荐文章于 2024-03-21 10:27:19 发布

阅读量1.6k

点赞数

分类专栏：前端js 文章标签： html webview css

本文链接：https://blog.csdn.net/weixin_44110923/article/details/122170207

版权

前端js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

这里设置多段打印区域

html中代码如下：

<!--startprint1-->
<div class="theme">
     <p><span class="text-right">发 &ensp;往：</span>各部门</p>
     <p><span class="text-right">发件人：</span>人力资源中心</p>
     <p><span class="text-right">主题词：</span>清明节 放假 通知</p>
     <p><span class="text-right">日 &ensp;期：</span>2021/03/30</p>
     <p><span class="text-right">抄 &ensp;送：</span>董事长</p>
 </div>
<!--endprint1-->
<p class="text-right">发文字号：医院一部通知〔2021〕12号</p>
<!--startprint2-->
<div class="title text-center">关于2021年清明节放假安排的通知</div>
<!--endprint2-->
<div class="text-center"><button onclick="preview()">&nbsp; 打印 &nbsp;</button></div>

js代码：

  function preview() {
         $("body").css('background-color','#fff');
        bdhtml = window.document.body.innerHTML;
        //获取当前页的html代码
        sprnstr = "<!--startprint1-->";
        //设置打印开始区域
        eprnstr = "<!--endprint1-->";
        //设置打印结束区域
        prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18);
        //从开始代码向后取html
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
        //从结束代码向前取html
		
		sprnstr2 = "<!--startprint2-->";
        //设置打印开始区域
        eprnstr2 = "<!--endprint2-->";
        //设置打印结束区域
        prnhtml2 = bdhtml.substring(bdhtml.indexOf(sprnstr2) + 18);
        //从开始代码向后取html
        prnhtml2 = prnhtml2.substring(0, prnhtml2.indexOf(eprnstr2));
        //从结束代码向前取html
        window.document.body.innerHTML = prnhtml+prnhtml2;
        window.print();
         window.document.body.innerHTML = bdhtml;
         //恢复页面样式
    };