• window.print()打印网页中的部分内容,打印后,原网页保持不变


    原文链接:https://segmentfault.com/a/1190000006236133

    利用iframe存放打印的内容,但是要注意把样式也放进iframe中,不然iframe中是没有样式的。.

    代码如下:

    <!DOCTYPE html>
    <html lang="en" data-theme="skin0">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=no">
        <title>条形码</title>
        <link rel="stylesheet" type="text/css" href="./css/txm.css" />
    </head>
    <body>
        <button type="button" class="printbtn" onclick="doPrint()">打印预览</button>
    <!--startprint-->
        <div class="container-fluid" id="test">
            <div class="row">
                <div class="txmrow">
                    <div class="txm">
                        <div class="txmimg"><img src="./img/txm.png" alt=""></div>
                        <div class="txmtext"><span>姓名:李昌盛</span><span>性别:男</span><span>班级:七年级1班</span></div>
                        <div class="txmtext"><span>学校:贵阳市第二中学</span></div>
                    </div>
                    <div class="txm">
                        <div class="txmimg"><img src="./img/txm.png" alt=""></div>
                        <div class="txmtext"><span>姓名:李昌盛</span><span>性别:男</span><span>班级:七年级1班</span></div>
                        <div class="txmtext"><span>学校:贵阳市第二中学</span></div>
                    </div>
                </div>
                <div class="txmrow">
                    <div class="txm">
                        <div class="txmimg"><img src="./img/txm.png" alt=""></div>
                        <div class="txmtext"><span>姓名:李昌盛</span><span>性别:男</span><span>班级:七年级1班</span></div>
                        <div class="txmtext"><span>学校:贵阳市第二中学</span></div>
                    </div>
                    <div class="txm">
                        <div class="txmimg"><img src="./img/txm.png" alt=""></div>
                        <div class="txmtext"><span>姓名:李昌盛</span><span>性别:男</span><span>班级:七年级1班</span></div>
                        <div class="txmtext"><span>学校:贵阳市第二中学</span></div>
                    </div>
                </div>
            </div>
        </div>
    <!--endprint-->
        <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
    </body>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
    function doPrint() {
      //获取当前页的html代码
      var bodyhtml = window.document.body.innerHTML;
      //设置打印开始区域、结束区域
      var startFlag = "<!--startprint-->";
      var endFlag = "<!--endprint-->";
      // 要打印的部分
      var printhtml = '<link rel="stylesheet" type="text/css" href="./css/txm.css" />' + bodyhtml.substring(bodyhtml.indexOf(startFlag),
          bodyhtml.indexOf(endFlag));
      console.log(printhtml);
      // 生成并打印ifrme
      var f = document.getElementById('printf');
      f.contentDocument.write(printhtml);
      f.contentDocument.close();
      f.contentWindow.print();
    }
    
    </script>
    
    </html>
    

      

  • 相关阅读:
    span i s等行内元素标签之间出现奇怪空格符号
    使用electron搭建桌面app的简便方法
    antd card 组件实现鼠标移入移出效果
    事物处理
    最近在做支付宝支付,在本地测试一切正常,上传到服务器就遇到报错:
    tp框架报错 Namespace declaration statement has to be the very first statement in the script
    前后端分离开发,跨域访问的apche设置
    thinkphp 同一字段不同查询条件实现
    Redis-server在windows下闪退
    tp volist需要便利两个数组时的处理办法
  • 原文地址:https://www.cnblogs.com/xi-li/p/15215676.html
Copyright © 2020-2023  润新知