使用html2canvas将html转换成canvas(将canvas下载下来的方法还未实现)

于 2018-11-01 16:19:31 发布
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liux6687/article/details/83622415
本文介绍如何利用jQuery.jqprint插件实现网页内容的实时打印功能，包括引入必要的样式和脚本文件，配置打印选项，以及通过事件调用来触发打印。同时展示了如何在打印前进行自定义设置，如预览图片和调整打印区域。

使用jquery.jqprint实现打印效果 
其中需要<link rel="stylesheet" type="text/css" media="print" href="css/parint.css" />来引入打印时的样式
jquery.jqprint 配置
  function print(){
       $("#print").jqprint({
          debug: false,
          importCSS: true,
          printContainer: true,
          operaSupport: false
       });
   }
事件调用即可 
    function doPrint() {
        print()
    }  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="http://www.young51.com/style/js/common/jquery.tools.min.js"></script>
        <script src="http://jserp.jinlejia.com/style/bootstrap/js/jquery/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/html2canvas.js"></script>
        <script type="text/javascript" src="js/jquery.jqprint-0.3.js"></script>
        <link rel="stylesheet" type="text/css" media="print" href="css/parint.css" />
    </head>
    <style>
                html, body, div, span,h1, h2, h3, h4, h5, h6, p, blockquote,a, em, img, q, dl, dt, dd, ul, li, form, label, legend {
    margin:0px;
    padding:0px;
    border:0px;
    font-size:14px;
    font-family:'寰蒋闆呴粦';
}

*{margin:0px;padding:0px;}
a img{border: none; } 
a{text-decoration:none;}
ul, ol, li{ list-style: none; }
a,button{text-decoration:none; }
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-appearance:none;font-size:100%}
body{background:#fff;}
input{outline:none}
input,textarea,select,option{ font-family:'寰蒋闆呴粦'}
.clear{ clear:both; font-size:0;}
iframe{border:none}

/*以下样式复制*/

.print_div{width: 800px; height: 740px; margin: 0px auto; margin-top: 100px;}
.print_left{width: 160px; padding-right: 10px; border-right:1px #ccc solid; height: 740px; box-sizing: border-box; float: left;}
.print_left h3{color: #000;font-size: 16px;}
.input_div{width: 100%; margin-top: 15px; display: inline-block;}
.inp{width: 125px; height: 25px; float: left; border: 1px #ccc solid; box-sizing: border-box; padding-left: 5px; line-height: 25px;}
.input_div span{float: left; margin-left: 5px; line-height: 25px;}
.buttonT{width: 100px; height: 30px; border-radius: 5px; background: #4b739a; line-height: 30px; text-align: center; 
color: #fff; border: 0; font-size: 14px; cursor: pointer; margin-top: 20px;}
.print_right{width:630px;float: left; }
.print_right h1{font-size: 20px; display: inline-block; text-align: center; width: 100%;}
.img_div{width: 440px; height: 520px;  margin: 0px auto; margin-top: 20px; cursor: pointer;}
.price_content{width: 100%; height: 80px; margin-top: 20px;}
.pric_left{width: 150px; height: 80px; float: left; margin-left: 100px;}
.pric_left span{font-size: 20px; font-weight: bold; color: #000;width: 100%; display: inline-block; margin-top: 25px;}
.pric_left em{ color: #000;width: 100%; display: inline-block; font-style: normal;}
.pric_right{width: 300px;float: left;}
.pric_right strong{width: 100%; display: inline-block; font-size: 20px; padding-bottom: 10px;}
.pric_right ul{width: 100%;}
.pric_right ul li{width:50%; float: left; line-height: 24px;}
.logo_img{width: 440px; height: 30px; background: #4f4b4a; margin-top: 10px;text-align: center; float: left; margin-left: 95px;}
.login_name{width: 100%; line-height: 30px; font-weight: bold;}
.img_house{width: 696px; height: 500px; position: absolute; top: 50%; left: 50%; margin-left: -348px; margin-top: -250px;
 background: #fff; border: 1px #ccc solid; box-sizing: border-box; padding: 15px;display: none; z-index: 99999;}
 .img_h_top{width: 100%; height: 30px; border-bottom: 1px #ccc solid;}
 .img_h_top strong{float: left; color: #000;}
 .img_h_top span{float: right;color: #000; cursor: pointer;}
 .img_list{width: 100%; height: 328px; overflow-y: auto;}
 .img_list ul{width: 100%;}
 .img_list ul li{width: 120px; height: 142px; float: left;margin-left: 10px; margin-top: 15px; position: relative; cursor: pointer;}
 .button_div{width: 100%;  margin-top: 10px; text-align: center;}
 .bg2zb,.popIframezb {
    background-color: #666; display:none;
    width: 100%;
    height: 100%;
    left:0;
    top:0;/*FF IE7*/
    filter:alpha(opacity=50);/*IE*/
    opacity:0.5;/*FF*/
    z-index:1;
    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/
    _top:       expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
    }
    .popIframezb {
    filter:alpha(opacity=0);/*IE*/
    opacity:0;/*FF*/
    }
    .yechonce{width: 20px; height: 20px; position: absolute; bottom: 0; right: 0;display: none;}
    canvas{margin: 0px auto;}
    .canvas_div{width: 670px; height: 810px; background: #fff; border: 1px #ccc solid; padding: 19px; box-sizing: border-box; position: absolute;
    margin-left: -335px; margin-top: -405px; left: 50%; top: 50%; display: none; z-index: 99999;}
    .can_d_top{line-height: 30px; float: left; color: #000;width: 100%; height: 30px;}
    .can_d_top strong{font-size: 16px; float: left; }
    .can_d_top span{font-size: 16px; float: right; cursor: pointer;}
    </style>
    <script>


     function print(){
       $("#print").jqprint({
          debug: false,
          importCSS: true,
          printContainer: true,
          operaSupport: false
       });
   }

    var index = -1;
    
    var hkey_root,hkey_path,hkey_key;
    hkey_root="HKEY_CURRENT_USER";
    hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
        
        function check(e) { 
    var re = /^\d+(?=\.{0,1}\d+$|$)/ 
    if (e.value != "") { 
        if (!re.test(e.value)) { 
            alert("请输入正确的数字"); 
            e.value = ""; 
            e.focus(); 
        } 
    } 
} 
function OnInput1(event){
    if(!isNaN(event.target.value)){
        console.log(event.target.value)
        $('.pric_left span').find('.font_size').html(event.target.value)
    }
}

function OnInput2(event){
    if(event.target.value!=null || event.target.value !=''){
        $('.login_name span').html(event.target.value)
    }
}

function OnInput3(event){
    if(event.target.value!=null || event.target.value !=''){
        $('.login_name font').html(event.target.value)
    }
}

 function save(){  

$('.can_d_bottom').html('');
 html2canvas(document.querySelector("#print")).then(canvas => {
    $('.can_d_bottom').append(canvas)
});
    $("#popIframezb").show();
    $("#bg2zb").show();
    $('.canvas_div').show();
   

            } 
            
    function doPrint() {
        print()
    }            
            
$(function(){
    
    $('.can_d_top span').click(function(){
      $(".canvas_div").hide();
    $("#popIframezb").hide();
    $("#bg2zb").hide();


})
    
    $('.img_src').click(function(){
      $(".img_house").show();
    $("#popIframezb").show();
    $("#bg2zb").show();

})
    $('.img_h_top span').click(function(){
        $(".img_house").hide();
        $("#popIframezb").hide();
        $("#bg2zb").hide();
    })
    
    $('.img_list ul li').click(function(){
        
        $('.img_list ul li').find('.yechonce').hide();
        $(this).find('.yechonce').show();
        index = $(this).index()
        
    })
    $('.cancel').click(function(){
        $(".img_house").hide();
        $("#popIframezb").hide();
        $("#bg2zb").hide();
        index = -1;
    })
    $('.sure_bt').click(function(){
        
        var src = $('.img_list ul li .img_c').eq(index)[0].src;
        $('.img_src').attr('src',src);
        $(".img_house").hide();
        $("#popIframezb").hide();
        $("#bg2zb").hide();
    })
    
})
        
    </script>
    <body>
        <div id="bg2zb" class="bg2zb" style="display:none;">
        </div>
        
        <div class="canvas_div">
            <div class="can_d_top">
                <strong>保存打印纸请右键另存为！</strong>
                <span>X</span>
            </div>
            <div class="can_d_bottom"></div>
        </div>
        
        <div class="img_house">
            <div class="img_h_top">
                <strong>选择户型图</strong>
                <span>X</span>
            </div>
            <div class="img_list">
                <ul>
                    <li>
                        <div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
                        <img class="img_c" src="img/12.jpg" width="120" height="142" />
                    </li>
                    <li>
                        <div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
                        <img class="img_c" src="img/13.jpg" width="120" height="142" />
                    </li>
                    <li>
                        <div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
                        <img class="img_c" src="img/14.jpg" width="120" height="142" />
                    </li>
                </ul>
            </div>
            <div class="button_div">
                <button class="buttonT sure_bt">确定</button>
                <button class="buttonT cancel">取消</button>
            </div>
        </div>
        
        <div class="print_div">
            <div class="print_left">
                <h3>自定义</h3>
                <div class="input_div">
                    <input class="inp"  placeholder="房价" oninput="OnInput1(event)" onblur="check(this)"  onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"/><span>万</span>
                </div>
                <div class="input_div">
                    <input class="inp" placeholder="登录人姓名" oninput="OnInput2(event)"/>
                </div>
                <div class="input_div">
                    <input class="inp" placeholder="电话号码" oninput="OnInput3(event)"/>
                </div>
                
                <button class="buttonT" style="margin-top: 350px;" onclick="save();" >预览图片</button>
                <button class="buttonT" onclick="doPrint()">打印</button>
                
            </div>
            <!--startprint-->
            <div class="print_right" id="print">
                <h1>洛卡小镇</h1>
                <div class="img_div">
                    <img class="img_src" id="img_src" src="img/12.jpg" width="440" height="520" />
                </div>
                
                <div class="price_content">
                    <div class="pric_left">
                        <span><font class="font_size">510</font>万</span>
                        <p><span></span><span></span><span></span></p>
                    </div>
                    <div class="pric_right">
                        <strong>户型：3室2厅1卫</strong>
                        <ul>
                            <li>面积：200m²</li>
                            <li>楼层：100层共110层</li>
                            <li>朝向：南北</li>
                            <li>装修：豪装</li>
                        </ul>
                        <div class="login_name"><span>登录人姓名</span>：<font>XXX</font></div>
                    </div>
                    <div class="logo_img">
                        <img class="img_logo" id="img_logo" src="img/bglogo.png">
                    </div>
                </div>
            </div>
            <!--endprint-->
        </div>
        
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值