zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    作业3
    数组求和
    2.自己的Github试用过程
    2.自己的Github注册流程
    图片左右滑动整理为插件
    artDialog中的time参数,ajax请求中的异步与同步
    简单的图片放大镜效果插件
    3月份学习安排
    前端好的网站
    web app开发中遇到的问题
  • 原文地址:https://www.cnblogs.com/xi-li/p/15215676.html
Copyright © 2011-2022 走看看