css
1 <style type="text/css"> 2 body { 3 margin: 0; 4 padding: 0; 5 background-color: #FAFAFA; 6 font: 12pt "Tahoma"; 7 } 8 9 * { 10 box-sizing: border-box; 11 -moz-box-sizing: border-box; 12 } 13 14 .page { 15 width: 21cm; 16 min-height: 29.7cm; 17 padding: 2cm; 18 margin: 1cm auto; 19 border: 1px #D3D3D3 solid; 20 border-radius: 5px; 21 background: white; 22 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 23 } 24 25 .subpage { 26 padding: 1cm; 27 border: 5px red solid; 28 height: 297mm; 29 overflow: visible; 30 outline: 2cm #FFEAEA solid; 31 background-color: dodgerblue; 32 } 33 34 @@page { 35 size: A4; 36 margin: 0; 37 } 38 39 @@media print { 40 .page { 41 margin: 0; 42 border: initial; 43 border-radius: initial; 44 width: initial; 45 min-height: initial; 46 box-shadow: initial; 47 background: initial; 48 page-break-after: always; 49 } 50 } 51 </style>
html
1 <div id="divContent" style="width:800px;margin:0 auto;"> 2 <div id="printCtrl" style="width:300px;margin:0 auto;"> 3 <object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WebBrowser" width="0"></object> 4 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="printSet()" style="width:80px">打印设置</a> 5 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="printPreview()" style="width:80px">打印预览</a> 6 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="print()" style="width:80px">打印</a> 7 </div> 8 <div id="divContentUL"> 9 <div class="page"> 10 <div class="subpage"> 11 <img src="" onload="imgOnload(this)" /> 12 </div> 13 </div> 14 </div> 15 </div>
javascript
1 function imgOnload(obj) { 2 var _this = obj; 3 var $parent = $(_this).parent(); 4 var parent_width = $parent.width();//容器宽度 5 var parent_height = $parent.height();//容器高度 6 var img_width_old = _this.width;//图片宽度 7 var img_height_old = _this.height;//图片高度 8 9 var vImgRWH = img_width_old / img_height_old;//图片宽高比例 10 var vParentRWH = parent_width / parent_height;//容器宽高比例 11 if (vImgRWH <= vParentRWH) { 12 var vW = parent_width / img_width_old; 13 var vH = parent_height / img_height_old; 14 var vv = vW >= vH ? vH : vW; 15 _this.width = img_width_old * vv; 16 _this.height = img_height_old * vv; 17 } 18 else { 19 var vH = parent_height / img_width_old; 20 var vW = parent_width / img_height_old; 21 if (vH > vW) { 22 _this.width = img_width_old * vW; 23 _this.height = img_height_old * vW; 24 } 25 else { 26 _this.width = img_width_old * vH; 27 _this.height = img_height_old * vH; 28 } 29 _this.style.transform = "rotate(90deg)"; 30 _this.style.marginTop = (_this.width - _this.height) / 2 + "px"; 31 _this.style.marginLeft = (_this.height - _this.width) / 2 + "px"; 32 33 } 34 35 }; 36 37 function print() { 38 var printCtrl = document.getElementById("printCtrl"); 39 printCtrl.style.display = "none"; 40 document.all.WebBrowser.ExecWB(6, 1); 41 printCtrl.style.display = ""; 42 } 43 44 function printPreview() { 45 var printCtrl = document.getElementById("printCtrl"); 46 printCtrl.style.display = "none"; 47 document.all.WebBrowser.ExecWB(7, 1); 48 printCtrl.style.display = ""; 49 } 50 51 function printSet() { 52 document.all.WebBrowser.ExecWB(8, 1); 53 }