js实现图片下载打印功能

Posted xc_flying

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
            width: 100%;
            height: 100%;
        }
        nav{
            position: absolute;
            top: 0;
            left: 0;
            width: 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;
            width: 60px;
            text-align: center;
        }
        .btn-cont a:hover p{
            display: block;
        }*/
        .btn-cont p{
            /*display: none;*/
            /*position: absolute;*/
            top: 32px;
            left:0;
            width: 100%;
            text-align: center;
        }
        .img-cont{
            position: relative;
            width: 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{
            width: 100%;
            height: 100%;
            overflow: auto;
            text-align: center;
            background: #333;
        }
        .img-cont img{
            width: 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>

　　

 

<!--_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;            width: 100%;            height: 100%;        }        nav{            position: absolute;            top: 0;            left: 0;            width: 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;            width: 60px;            text-align: center;        }        .btn-cont a:hover p{            display: block;        }*/        .btn-cont p{            /*display: none;*/            /*position: absolute;*/            top: 32px;            left:0;            width: 100%;            text-align: center;        }        .img-cont{            position: relative;            width: 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{            width: 100%;            height: 100%;            overflow: auto;            text-align: center;            background: #333;        }        .img-cont img{            width: 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>





以上是关于js实现图片下载打印功能的主要内容，如果未能解决你的问题，请参考以下文章

vue 实现打印功能，打印的时候加上水印图片

js调用浏览器的打印功能

vue实现转图片打印

关于 用 js 实现 快照功能

JS 打印功能代码可实现打印预览打印设置等

小程序各种功能代码片段整理---持续更新