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 ...
随机推荐
- Struts2自定义过滤器的小例子-入门篇
创建web项目 实现的效果! 用户点击页面不同的链接,后台调用不同的代码! 创建两个类实现共同的接口! public interface Action { String execute(); } ...
- 在Android用ZXing.jar识别二维码的精简版(简化了配置和代码)
近期公司做了一款OTP令牌激活的产品,因为之前激活手机令牌须要输入非常多的激活信息才干进行激活. 经过一段使用后,发现易用性不是非常强,考虑假设添加二维码的的扫码功能岂不是大大添加了易 ...
- 安装linux各种桌面环境
1.安装kde ①添加 KDE SC 4.11 库 打开一个终端窗口,在终端窗口中输入如下命令: sudo add-apt-repository ppa:kubuntu-ppa/backports 回 ...
- evm指令集手册
evm指令集手册 Opcodes 结果列为"-"表示没有运算结果(不会在栈上产生值),为"*"是特殊情况,其他都表示运算产生唯一值,并放在栈顶. mem[a.. ...
- html5--项目实战-仿360囧图
html5--项目实战-仿360囧图 实例: 代码 <!doctype html> <html> <head> <meta charset="utf ...
- oracle启动流程
1.切换为oracle用户:su - oracle,如: $su - oracle 2..启动监听器:lsnrctl status,如: [oracle@master ~]$ lsnrctl star ...
- 四:网络--NSURLConnection基本使用
一.NSURLConnection的常用类 (1)NSURL:请求地址 (2)NSURLRequest:封装一个请求,保存发给服务器的全部数据,包括一个NSURL对象,请求方法.请求头.请求体.... ...
- AC自动机简明教程
不会kmp和Trie树的请点击右上角X. AC自动机与kmp的唯一区别便是从单模式串变成了多模式串. 那么与kmp相同,AC自动机中的fail指针是指向当前状态的最长后缀. 当然这个后缀要在Trie树 ...
- 就是要第一个出场的albus 【BZOJ】 线性基
就是我代码里读入之后的那一部分. 1.(一下a[]为原数组 a'[]为线性基) 线性基 中的a'[i]其实 是 原来的a[]中的某个子集(2^n个子集中的某个) 异或出来的 可能会有其他的子集与它异 ...
- BZOJ2283: [Sdoi2011]火星移民
Description 在2xyz年,人类已经移民到了火星上.由于工业的需要,人们开始在火星上采矿.火星的矿区是一个边长为N的正六边形,为了方便规划,整个矿区被分为6*N*N个正三角形的区域(如图1) ...