js实现图片下载、打印功能

<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="favicon.ico" >
    <link rel="Shortcut Icon" href="favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <style>
        .cont{
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 100%;
        }
        nav{
            position: absolute;
            top: 0;
            left: 0;
             100%;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            font-weight: 700;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        h1.title{
            position: absolute;
            left: 20px;
            line-height: 40px;
            top: 0;
            padding: 0;
            font-size: 20px;
        }
        .page-num{
            text-align: center;
        }
        .btn-cont{
            position: absolute;
            right: 20px;
            top: 0;
        }
/*        .btn-cont a{
            position:relative;
             60px;
            text-align: center;
        }
        .btn-cont a:hover p{
            display: block;
        }*/
        .btn-cont p{
            /*display: none;*/
            /*position: absolute;*/
            top: 32px;
            left:0;
             100%;
            text-align: center;
        }
        .img-cont{
            position: relative;
             80%;
            height: 100%;
            padding: 40px 20px 20px;
            font-size: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .img-box{
             100%;
            height: 100%;
            overflow: auto;
            text-align: center;
            background: #333;
        }
        .img-cont img{
             auto;
            height: 100%;
        }
        .a-r-btn{
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        .a-r-btn .btn{
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="cont">
    <nav class="nav">
        <h1 class="title">电子回执单</h1>
        <p class="page-num">1/1</p>
        <div class="btn-group btn-cont">
            <a class="btn radius" id="download"><i class="Hui-iconfont Hui-iconfont-down"></i><p>下载</p></a>
            <a class="btn radius" id="print"><i class="Hui-iconfont Hui-iconfont-dayinji"></i><p>打印</p></a>
        </div>
    </nav>
    <section class="img-cont">
        <div class="img-box">
            <img src="http://images.57us.com/p8/up/2017/0809/201708092245517995.jpg" alt="回执单图片" class="radius" id="receiptImg">
        </div>
    </section>
    <div class="a-r-btn">
        <a class="btn radius" id="increase"><i class="Hui-iconfont Hui-iconfont-add"></i></a>
        <a class="btn radius" id="narrow"><i class="Hui-iconfont Hui-iconfont-jianhao"></i></a>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>

<!-- <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script> -->
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>

<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script>
    $(function(){
        var imgHeight = 100;
        $("#increase").on("click",function(){
            imgHeight += 10;
            $("#receiptImg").css({
                "height":imgHeight+"%"
            });
            layer.msg(imgHeight+"%");
        });
        $("#narrow").on("click",function(){
            imgHeight -= 10;
            if(imgHeight <= 100){
                imgHeight = 100;
            }
            $("#receiptImg").css({
                "height":imgHeight+"%"
            });
            layer.msg(imgHeight+"%");
        });
        $("#print").on("click",function(){
            var currDoc = $("body").html();
            var printDoc = $(".img-cont").html();
            $("body").html(printDoc);
            $("#receiptImg").css({
                "width":"100%",
                "height":"auto"
            });
            $("#receiptImg").removeClass("radius");
            window.print();
            $("body").html(currDoc);
        });
        $("#download").on("click",function(){
            var url = $("#receiptImg").attr("src");
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);
            $(this).attr({
                "href":url,
                "download":"回执单"
            });
            this.dispatchEvent(evt);
        });
    });
</script>
</body>
</html>

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="Bookmark" href="favicon.ico" > <link rel="Shortcut Icon" href="favicon.ico" />  <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />   <style> .cont{ position: absolute; top: 0; left: 0; 100%; height: 100%; } nav{ position: absolute; top: 0; left: 0; 100%; height: 40px; line-height: 40px; padding: 0 20px; font-weight: 700; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } h1.title{ position: absolute; left: 20px; line-height: 40px; top: 0; padding: 0; font-size: 20px; } .page-num{ text-align: center; } .btn-cont{ position: absolute; right: 20px; top: 0; }/* .btn-cont a{ position:relative; 60px; text-align: center; } .btn-cont a:hover p{ display: block; }*/ .btn-cont p{ /*display: none;*/ /*position: absolute;*/ top: 32px; left:0; 100%; text-align: center; } .img-cont{ position: relative; 80%; height: 100%; padding: 40px 20px 20px; font-size: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .img-box{ 100%; height: 100%; overflow: auto; text-align: center; background: #333; } .img-cont img{ auto; height: 100%; } .a-r-btn{ position: absolute; right: 20px; bottom: 20px; } .a-r-btn .btn{ display: block; margin-top: 10px; } </style></head><body><div class="cont"> <nav class="nav"> <h1 class="title">电子回执单</h1> <p class="page-num">1/1</p> <div class="btn-group btn-cont"> <a class="btn radius" id="download"><i class="Hui-iconfont Hui-iconfont-down"></i><p>下载</p></a> <a class="btn radius" id="print"><i class="Hui-iconfont Hui-iconfont-dayinji"></i><p>打印</p></a> </div> </nav> <section class="img-cont"> <div class="img-box"> <img src="http://images.57us.com/p8/up/2017/0809/201708092245517995.jpg" alt="回执单图片" class="radius" id="receiptImg"> </div> </section> <div class="a-r-btn"> <a class="btn radius" id="increase"><i class="Hui-iconfont Hui-iconfont-add"></i></a> <a class="btn radius" id="narrow"><i class="Hui-iconfont Hui-iconfont-jianhao"></i></a> </div></div><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>

<script> $(function(){ var imgHeight = 100; $("#increase").on("click",function(){ imgHeight += 10; $("#receiptImg").css({ "height":imgHeight+"%" }); layer.msg(imgHeight+"%"); }); $("#narrow").on("click",function(){ imgHeight -= 10; if(imgHeight <= 100){ imgHeight = 100; } $("#receiptImg").css({ "height":imgHeight+"%" }); layer.msg(imgHeight+"%"); }); $("#print").on("click",function(){ var currDoc = $("body").html(); var printDoc = $(".img-cont").html(); $("body").html(printDoc); $("#receiptImg").css({ "width":"100%", "height":"auto" }); $("#receiptImg").removeClass("radius"); window.print(); $("body").html(currDoc); }); $("#download").on("click",function(){ var url = $("#receiptImg").attr("src"); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false); $(this).attr({ "href":url, "download":"回执单" }); this.dispatchEvent(evt); }); });</script></body></html>