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. Vue实例及生命周期

    1,Vue实例生命周期. 有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求,开发,针对这样的需求,Vue提供给我们一系列的钩子函数 2,Vue生命周期的阶段 ...

  2. slf4j的总结

    参考文章 log4j2使用总结 slf4j介绍以及实现原理窥探 使用Slf4j集成Log4j2构建项目日志系统的完美解决方案 slf4j(全称是Simple Loging Facade For Jav ...

  3. sublime text3使用插件SublimeTextTrans设置透明度

    推荐一款在windows上设置sublime2和sublime3背景透明度的插件:SublimeTextTrans, 下载地址:https://github.com/vhanla/SublimeTex ...

  4. eclipse svn修改用户名密码

    1,svn客户端删除 2,eclipse 补充,上图为网友资料,但实际操作过程中,发现eclipse中svn为svnkit,但相应目录下无.keyring文件,最后按步骤2删除auth下所有文件,再次 ...

  5. 【转】Java 并发编程:volatile的使用及其原理

    一.volatile的作用 在<Java并发编程:核心理论>一文中,我们已经提到过可见性.有序性及原子性问题,通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果 ...

  6. 就是要第一个出场的albus 【BZOJ】 线性基

    就是我代码里读入之后的那一部分. 1.(一下a[]为原数组 a'[]为线性基) 线性基 中的a'[i]其实 是 原来的a[]中的某个子集(2^n个子集中的某个) 异或出来的  可能会有其他的子集与它异 ...

  7. Ordeby then by

    先按orderby排序,再按thenby排序 return PartialView("_ClickRangeOnCategory", articles.OrderByDescend ...

  8. linux设备驱动第三篇:如何写一个简单的字符设备驱动?

    在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分配的一些内存 ...

  9. Mysql数据库基础操作

    Mysql数据库基础操作 在mysql数据库中开启使用tab键补全功能 1)修改主配置文件/etc/mysql/my.cnf(mysql和mariadb目录有些不同) vim /etc/mysql/m ...

  10. Linux - 常用命令索引

    文件和目录操作 pwd - 显示当前所在的位置 cd - 切换目录 文件过滤及内容编辑 ... 文本处理三剑客 ... 系统信息查询与搜索文件 ... 文件备份与压缩 ... 用户管理与信息查询 .. ...