:::info window.print()打印其实打印的是整个当前网页 :::

  • 主体思路是要把打印的区域截取出来，把当前的页面重构，截取完恢复页面

    1. <body>
    2. <div class="warp">
    3.   <input id="qrcode_text" type="text" style="" value="生成二维码">
    4.   <div class="header">二维码收款</div>
    5.   <div class="content">
    6.       <p>无需加好友，扫二维码向我付钱</p>
    7.       <div class="ewm" id="erweima"></div>
    8.       <div class="footer_text">
    9.           <span class="left_" >设置金额</span>
    10.           <span class="right_" id="dy">打印收款码</span>
    11.       </div>
    12.   </div>
    13.   <div class="footer">
    14.       收款小账本
    15.   </div>
    16. </div>
    17. <!--startprint-->
    18. <div class="newWarp">
    19.   <div class="content">
    20.       <div class="header_">
    21.           <div class="logo">推荐使用微信</div>
    22.           <div class="img_" id="img_">
    23.               <img src="">
    24.           </div>
    25.           <div class="logo" id="logo_text">匆匆那年</div>
    26.       </div>
    27.       <div class="footer_d"></div>
    28.   </div>
    29.   <!--endprint-->
    30. </div>
    31. </body>
    1. //点击打印
    2.       $('#dy').click(function(){
    3.           var startStr = "<!--startprint-->";
    4.           var endStr = "<!--endprint-->";
    5.           bdhtml=window.document.body.innerHTML;
    6.           var printHtml = bdhtml.substring(
    7.               bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr)
    8.           );
    9.           //将截取的字符串进行打印
    10.           window.document.body.innerHTML = printHtml;
    11.           window.print();
    12.           //打印结束后重新加载页面,否则打印页面点击取消时原页面被修改
    13.           window.document.body.innerHTML = bdhtml;
    14.           location.reload();
    15.       })
    16.   })

    在style中，使用@media print{}

  • 打印时单独用一套样式，就可以方便修改，使用@media print{}不会影响平时展示

    1. @media print{
    2.           .newWarp{
    3.               width:380px;
    4.               height: 100%;
    5.               margin-left: 100px;
    6.           }
    7.           .newWarp .content{
    8.               width:100%;height: 500px;
    9.               margin-top: 120px;
    10.           }
    11.           .header_{
    12.               width:100%;
    13.               height: 430px;
    14.               background-color: #21AA37;
    15.           }
    16.           .logo{
    17.               height:100px;
    18.               width:100%;
    19.               line-height: 100px;
    20.               color:#ffffff;
    21.               font-size: 30px;
    22.               text-align: center;
    23.           }
    24.           .img_{
    25.               width:200px;
    26.               height: 200px;
    27.               margin: 0 auto;
    28.               border:1px solid red;
    29.           }
    30.           .footer_d{
    31.               width:100%;
    32.               height: 70px;
    33.               background: url(images/wx.png);
    34.               background-size: 100% 100%;
    35.           }
    36.       }

    生成二维码 QRCode

  • QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库

    1. <script src="js/qrcodejs-master/qrcode.js"></script>
    1. //生成二维码
    2. var qrcode = new QRCode(document.getElementById("erweima"), {
    3. width: 200,
    4. height: 200,
    5. colorDark : '#000000',
    6. colorLight : '#ffffff',
    7. correctLevel : QRCode.CorrectLevel.H
    8. });
    9. $('#qrcode_text').on('change', function() {
    10. // 设置参数方式
    11. qrcode.makeCode(this.value);
    12. setTimeout(function(){
    13.   var data = $('#erweima img').attr('src');
    14.   $('#img_ img').attr('src',data)
    15.   var value_ = $('#qrcode_text').val()
    16.   console.log(value_);
    17. },10)
    18. });