web页面打印--铺满A4

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>
View Code

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>
View Code

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         }
View Code

 

posted @ 2017-12-15 16:52  暗夜苹果  阅读(811)  评论(0)  编辑  收藏  举报