<!--_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实现图片下载、打印功能
原文地址：https://www.cnblogs.com/xie-xiao-chao/p/8266978.html