错误的写法:

//打印
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. 学习设计模式第三 - 基础使用UML表示关系

    面向对象的思想中存在如下几种关系,一般为了方便交流都使用UML的类图来展现类之间的关系.所以了解类图中符号的含义对看懂类图,尤其是用类图展示的设计模式很有帮助.下面依次介绍这几种关系 类继承关系 继承 ...

  2. 一天一小段js代码(no.4)

    最近在看网上的前端笔试题,借鉴别人的自己来试一下: 题目: 写一段脚本,实现:当页面上任意一个链接被点击的时候,alert出这个链接在页面上的顺序号,如第一个链接则alert(1), 依次类推. 有一 ...

  3. Linux grep命令和正则表达式

    介绍 grep是一个功能强大的文本搜索命令,可以用它来搜索某个文件中是否包含指定的搜索内容,它可以利用正则表达式来做复杂的筛选操作,它还可以为其它命令传输给管道的筛选,比如我们常用到的分析单个进程的操 ...

  4. jQuery为哪般去掉了浏览器检测

    由于做HTML5相关的项目,许多前卫时髦的前端技术就需要考虑一下IE是否支持.要是在以前,可以很方便地调用jQuery的jQuery.browser来实现. If(jQuery.browser.msi ...

  5. 已经为类型参数“Chart”指定了 constraint 子句。必须在单个 where 子句中指定类型参数的所有约束

    public abstract class FillWorkBook<TModel, Chart> where TModel : struct where Chart : new() wh ...

  6. swift 创建桥接头文件

    1,创建iOS 下source模块里的header file 文件,这个文件要注意命名的规则:xxx-Brigding-Header.h 2,到build setting 里 Swift Compil ...

  7. redis配置文件redis.conf中文版(基于2.4)

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/99.html?1455869981 代码如下: # Redis示例配置文件 ...

  8. 将不确定变为确定~transactionscope何时提升为分布式事务~SQL2005与SQL2008不同

    回到目录 Transactionscope何时被提升为分布式事务,即时要触发msdtc服务,这个问题与数据库版本有关,在前面的文章中,我的MSTDC系列出现了多个版本,有一点没有说清楚,测试的环境不同 ...

  9. Atitit 研发体系建立 数据存储与数据知识点体系知识图谱attilax 总结

    Atitit 研发体系建立 数据存储与数据知识点体系知识图谱attilax 总结 分类具体知识点原理规范具体实现(oracle,mysql,mssql是否可以自己实现说明 数据库理论数据库的类型 数据 ...

  10. 每天一个linux命令(17):whereis 命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...