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. [IT学习]转载python 项目 计算器

    这个是从网上搜到的Python小项目之计算器(原文地址:http://www.2cto.com/kf/201402/279637.html).但该段代码估计是Python 2 写的. 如果你使用的程序 ...

  2. [办公应用]让WORD自动显示到四级目录

    一般情况下,word的目录默认显示到三级目录.如果需要显示到四级目录,你会怎么操作呢? 只要按下图所示,单击“插入”-“引用”-“索引和目录” 然后单击“目录”选项卡,将“显示级别”处的3改为4即可. ...

  3. 2016/04/18 ①注册 注册处理 ② 审核 审核处理 ③登录 登录处理 ④需要jquery-1.11.2.min.js DBDA.php

    ① 注册   zhuceye.php <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. iOS开发——高级篇——FMDB 数据库简单使用

    #import <Foundation/Foundation.h> @interface UserDB : NSObject // 把userDB设计成一个单例类 + (id)shareI ...

  5. struts2的(S2-045,CVE-2017-5638)漏洞测试笔记

    网站用的是struts2 的2.5.0版本 测试时参考的网站是http://www.myhack58.com/Article/html/3/62/2017/84026.htm 主要步骤就是用Burp ...

  6. vue 生命周期钩子 过滤器 计算属性

    每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...

  7. asp.net mvc4 controller

    controller返回几种返回结果

  8. css模型

    外边距: margin:1px 2px 3px 4px; 上     右     下     左 内边距: padding:1px 2px 3px 4px; 上     右     下     左 边 ...

  9. 微信公众平台——基础配置——服务器配置:PHP版

    在自己的服务器上新建一个空白php文件,输入以下任一版本的代码,如下: 版本一: <?php $token = "dige1994"; $signature = $_GET[ ...

  10. poj 1474 Video Surveillance 【半平面交】

    半平面交求多边形的核,注意边是顺时针给出的 //卡精致死于是换(?)了一种求半平面交的方法-- #include<iostream> #include<cstdio> #inc ...