web页面打印--铺满A4
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的更多相关文章
- web页面打印
在使用的两种方式打印: 第一种:js如下 function doPrint() { allhtml = window.document.body.innerHTML; starstr = " ...
- C# Web页面打印网页
<style media=print type="text/css"> .noprint{display:none} </style> 在打印时 ...
- Web系统页面打印技术实现与分析
1 Web页面打印概述应用WEB化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于WEB的应用,客户端的规则很简单,容易学习,容易维护,容易发布.在WEB系统中,打印的确是个烦人的问题 ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
- web页面内容打印总结
web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...
- web在线打印,打印阅览,打印维护,打印设计
winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕 ...
- android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...
- 使用jqprint插件完成页面打印
使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠w ...
随机推荐
- HDU1176 免费馅饼 —— DP
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others ...
- codeforces 686C C. Robbers' watch(dfs)
题目链接: C. Robbers' watch time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- CollectionView旋转水平卡片布局
概述 UICollectionView真的好强大,今天我们来研究一下这种很常见的卡片动画效果是如何实现了.本篇不能太深入地讲解,因为笔者也是刚刚摸索出点眉目,但是并没有深刻地理解.如果在讲解过程中,出 ...
- OpenMediaVault 搭建git,ssh无法连接问题
/************************************************************************* * OpenMediaVault 搭建git,ss ...
- bzoj 4521 电话号码
题目大意: 求$[L,R]$中,满足不同时存在4和8且有连续三个一样的个数 思路: 我为什么要记忆化搜索里带-1啊 我可真是个** 直接记忆化搜索记前两位是否有4,8以及是否满足连续 #include ...
- BZOJ_1307_玩具_单调栈+双指针
BZOJ_1307_玩具_单调栈+双指针 Description 小球球是个可爱的孩子,他喜欢玩具,另外小球球有个大大的柜子,里面放满了玩具,由于柜子太高了,每天小球球都会让妈妈从柜子上拿一些玩具放在 ...
- [OS][FS]查看ext3文件系统分区的superblock
本文将介绍怎样读取一个分区的superblock: 1. 首先我们查看一下在磁盘上有哪些分区,通过fdisk -l 这里有三个分区,我们下面查看/dev/sda3(这是一个device file) 2 ...
- IJ:IJ来了
ylbtech-IJ:IJ来了 1.返回顶部 1. 2. 2.2. 3. 4. 2.返回顶部 1. 2. 3. 3. Welcome to IntelliJ IDEA返回顶部 1. 2.2. 2.2. ...
- word-break word-wrap
work-break:break-all CJK超出的部分自动换行 word-wrap:break-word CJK如果有分隔符,当前分隔符之后与下一个分隔符之间的内容不能在这一行全部显示的话,在当前 ...
- JavaScript 算法与数据结构(转载)
JavaScript 算法与数据结构 https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md