错误的写法:

//打印
function printPage(areaId) {
if (parent.$("#PrinFrame").length == 0) {
parent.$("body").append('<iframe id="PrinFrame" style="display: none; "></iframe>');
} var prinFrame = parent.$("#PrinFrame")[0];
$(prinFrame).contents().find("body").html($("#" + areaId).html()); var win = prinFrame.contentWindow;
win.document.execCommand('Print');
}

错误原因:只把打印区域的内容放到iframe中,样式信息丢了。

改进后的写法:

//打印
function printPage(areaId) {
if (parent.$("#PrinFrame").length == 0) {
parent.$("body").append('<iframe id="PrinFrame" style="display: none; "></iframe>');
} var prinFrame = parent.$("#PrinFrame")[0];
var win = prinFrame.contentWindow;
$(prinFrame).attr("src", window.location.href);
$(prinFrame).load(function () {
$(prinFrame).contents().find("body").html($("#" + areaId).html());
win.document.execCommand('Print');
});
}

在iframe中重新加载当前页面,然后把body中的内容替换成待打印区域,这样iframe中保留了样式信息。

上面写法的缺点:多次点击打印按钮,iframe的load事件会被绑定多次;打印区域的大小超出A4纸范围;

再次改进后的写法:

//打印
function printPage(areaId) {
var prinFrame;
var win; if (parent.$("#PrinFrame").length == 0) {
parent.$("body").append('<iframe id="PrinFrame" style="display: none; "></iframe>');
prinFrame = parent.$("#PrinFrame")[0];
win = prinFrame.contentWindow; $(prinFrame).load(function () {
setTimeout(function () {
var html = '<table style="width:970px;"><tr><td>';
html += $("#" + areaId).html();
html += '</td></tr></table>';
$(prinFrame).contents().find("body").html(html);
win.document.execCommand('Print');
}, 100);
});
}
else {
prinFrame = parent.$("#PrinFrame")[0];
} $(prinFrame).attr("src", window.location.href);
}

再次改进后,确保iframe的load事件只被绑定一次;用宽度为970的table限制打印区域大小。

上面的写法还是有错误,重新打开tab页时,点击打印,不再进入iframe的load方法,再修改:

//打印
function printPage(areaId) {
if (parent.$("#PrinFrame").length == 0) {
parent.$("body").append('<iframe id="PrinFrame" style="display: none; "></iframe>');
} parent.$("#PrinFrame").attr("src", window.location.href); parent.$("#PrinFrame").one("load", function () {
setTimeout(function () {
var html = '<table style="width:970px;"><tr><td>';
html += $("#" + areaId).html();
html += '</td></tr></table>';
parent.$("#PrinFrame").contents().find("body").html(html);
parent.$("#PrinFrame")[0].contentWindow.document.execCommand('Print');
}, 100);
});
}

弄了一天,分页打印的时候还是有问题,如下图:

JS打印页面指定区域的更多相关文章

  1. js打印页面指定区域,并去掉页眉上的时间和请求路径

    需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...

  2. js打印div指定区域内容

    <script> function myPrint(obj){ var newWindow=window.open("打印窗口","_blank") ...

  3. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  4. vue 打印页面部分区域

    1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容

  5. window.print()打印页面指定内容(使用iframe保证原页面不失效)

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  6. JavaScript之打印页面局部区域

    /** * [print part area of html page] * @Author JohnnyZen * @DateTime 2017-10-23 * @copyright [johnny ...

  7. JS打印页面

         打印 整个html页面(PS:样式要写在页面里面才能打印(就是用内部样式))             <a id="dayi" runat="server ...

  8. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  9. js打印html指定元素,解决动态获取的图片无法打印问题

    用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...

随机推荐

  1. Jenkins+Git 集成测试(build、zip、curl)

    自上篇文章<jenkins + Git 搭建持续集成环境>后,这次配置的job有了新的要求,同时也踩到了新的坑.特此记录,以警己身. 任务要求: 这三个步骤都在job配置页面中Build部 ...

  2. SQL调优之降龙十八掌系列

    降龙十八掌是金庸小说的武功,招式名称取自<周易>,丐帮的镇帮绝学. 数据库性能优化是一门博大精深的学问.是一个大课题.本系列算是对数据库性能优化的一个总结,算是为2013年 划下一个句号. ...

  3. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  4. Android 综合揭秘 —— 全面剖释 Service 服务

    引言 Service 服务是 Android 系统最常用的四大部件之一,Android 支持 Service 服务的原因主要目的有两个,一是简化后台任务的实现,二是实现在同一台设备当中跨进程的远程信息 ...

  5. common-dbcp2数据库连接池参数说明

    参数 默认值 描述 建议值 DefaultAutoCommit  null 通过这个池创建连接的默认自动提交状态.如果不设置,则setAutoCommit 方法将不被调用.  true Default ...

  6. 人机大战之AlphaGo的硬件配置和算法研究

    AlphaGo的硬件配置 最近AlphaGo与李世石的比赛如火如荼,关于第四盘李世石神之一手不在我们的讨论范围之内.我们重点讨论下AlphaGo的硬件配置: AlphaGo有多个版本,其中最强的是分布 ...

  7. Java程序员的日常—— 基于类的策略模式、List<?>与List、泛型编译警告、同比和环比

    早晨起得太早,昨晚睡得太晚,一天都迷迷糊糊的.中午虽然睡了半个小时,可是依然没有缓过来.整个下午都在混沌中....不过今天下载了一款手游--<剑侠情缘>,感觉不错,喜欢这种类型的游戏. 今 ...

  8. Beats数据采集---Packetbeat\Filebeat\Topbeat\WinlogBeat使用指南

    Beats是elastic公司的一款轻量级数据采集产品,它包含了几个子产品: packetbeat(用于监控网络流量). filebeat(用于监听日志数据,可以替代logstash-input-fi ...

  9. atitit 短信验证码的源码实现  .docx

    atitit 短信验证码的源码实现  .docx 参考 Atitit usrQBM1603短信验证码规范1 主要方法1 源码实现1 参考 Atitit usrQBM1603短信验证码规范 主要方法 L ...

  10. Atitit 基于dom的游戏引擎

    Atitit 基于dom的游戏引擎 1. 添加sprite控件(cocos,createjs,dom)1 1.1.1. Cocos1 1.1.2. createjs1 1.1.3. Dom模式2 1. ...