css

    <style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
} * {
box-sizing: border-box;
-moz-box-sizing: border-box;
} .page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
} .subpage {
padding: 1cm;
border: 5px red solid;
height: 297mm;
overflow: visible;
outline: 2cm #FFEAEA solid;
background-color: dodgerblue;
} @@page {
size: A4;
margin: 0;
} @@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>

html

  <div id="divContent" style="width:800px;margin:0 auto;">
<div id="printCtrl" style="width:300px;margin:0 auto;">
<object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WebBrowser" width="0"></object>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="printSet()" style="width:80px">打印设置</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="printPreview()" style="width:80px">打印预览</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="print()" style="width:80px">打印</a>
</div>
<div id="divContentUL">
<div class="page">
<div class="subpage">
<img src="" onload="imgOnload(this)" />
</div>
</div>
</div>
</div>

javascript

  function imgOnload(obj) {
var _this = obj;
var $parent = $(_this).parent();
var parent_width = $parent.width();//容器宽度
var parent_height = $parent.height();//容器高度
var img_width_old = _this.width;//图片宽度
var img_height_old = _this.height;//图片高度 var vImgRWH = img_width_old / img_height_old;//图片宽高比例
var vParentRWH = parent_width / parent_height;//容器宽高比例
if (vImgRWH <= vParentRWH) {
var vW = parent_width / img_width_old;
var vH = parent_height / img_height_old;
var vv = vW >= vH ? vH : vW;
_this.width = img_width_old * vv;
_this.height = img_height_old * vv;
}
else {
var vH = parent_height / img_width_old;
var vW = parent_width / img_height_old;
if (vH > vW) {
_this.width = img_width_old * vW;
_this.height = img_height_old * vW;
}
else {
_this.width = img_width_old * vH;
_this.height = img_height_old * vH;
}
_this.style.transform = "rotate(90deg)";
_this.style.marginTop = (_this.width - _this.height) / 2 + "px";
_this.style.marginLeft = (_this.height - _this.width) / 2 + "px"; } }; function print() {
var printCtrl = document.getElementById("printCtrl");
printCtrl.style.display = "none";
document.all.WebBrowser.ExecWB(6, 1);
printCtrl.style.display = "";
} function printPreview() {
var printCtrl = document.getElementById("printCtrl");
printCtrl.style.display = "none";
document.all.WebBrowser.ExecWB(7, 1);
printCtrl.style.display = "";
} function printSet() {
document.all.WebBrowser.ExecWB(8, 1);
}

web页面打印--铺满A4的更多相关文章

  1. web页面打印

    在使用的两种方式打印: 第一种:js如下 function doPrint() { allhtml = window.document.body.innerHTML; starstr = " ...

  2. C# Web页面打印网页

    <style media=print type="text/css">      .noprint{display:none}  </style> 在打印时 ...

  3. Web系统页面打印技术实现与分析

    1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问题 ...

  4. 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  5. (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

    http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...

  6. web页面内容打印总结

    web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...

  7. web在线打印,打印阅览,打印维护,打印设计

    winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕 ...

  8. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  9. 使用jqprint插件完成页面打印

    使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w ...

随机推荐

  1. oracle 导出导入不含数据的空库

    10g或之前,用exp导出,imp导入,带上rows=n参数 11g或以上,用expdp导出,impdp导入,带上CONTENT = METADATA_ONLY 参数 expdp带上此参数,不导出数据 ...

  2. how to use datatables editor

    Basic initialisation Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that ...

  3. 在Orchard CMS Theme 用代码定义布局Widgets

    因为公司业务需要,经过本人几个月尝试,使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn).在刚开始接触Orchard CMS,对于个性化的网页布局不知道怎 ...

  4. manacher求最长回文子串算法

    原文:http://www.felix021.com/blog/read.php?2040 首先用一个非常巧妙的方式,将所有可能的奇数/偶数长度的回文子串都转换成了奇数长度:在每个字符的两边都插入一个 ...

  5. 【转】python中获得当前目录和上级目录

    原文地址:http://blog.csdn.net/liuweiyuxiang/article/details/71154346 获取当前文件的路径: from os import path d = ...

  6. JS处理Cookie

    <script>function GetCookieVal(offset)//获得Cookie解码后的值{var endstr = document.cookie.indexOf (&qu ...

  7. J20170524-hm

    取りこぼし 意外地输给较自己实力弱的对手,爆出冷门,败给手下败将 振り分け 分配,整理 スキーマ 图解.模式.图式

  8. bzoj 1613: [Usaco2008 Jan]Running贝茜的晨练计划【dp】

    设f[i][j]为第i分钟疲劳j,从三种情况转移,记得休息的时候判断从i开始休息到n能不能恢复到疲劳0 #include<iostream> #include<cstdio> ...

  9. eurekaclient向eurekaserver注册使用真实ip设置

    有时候eureka.instance.prefer-ip-address=true不管用,解决办法如下.

  10. python爬虫爬取腾讯招聘信息 (静态爬虫)

    环境: windows7,python3.4 代码:(亲测可正常执行) import requests from bs4 import BeautifulSoup from math import c ...