使用window.print()时会出现两个问题：

（1）直接使用window.print() 打印的是整页内容-->无法实现打印指定区域

（2）打印时替换body中的内容，打印完成后再替换回来-->这样会导致原来页面状态失效

使用iframe即可打印指定内容，也可保证页面不失效，具体方法如下：

1、将打印的内容独立出来为一个print.html文件，并为页面添加打印事件

<!DOCTYPE html>

<html>

<head>

   ...

</head>

<body>

    ...打印内容

</body>

<script>

    function iframePrint(){    //添加打印事件

      window.print();

    }

</script>

2、在原页面中使用iframe引入打印页面

<!DOCTYPE html>

...

<iframe src="print.html" frameborder="0" id="printIframe" name="printIframe" ></iframe>

...

<button id="btn">打印</button>

...

3、打印事件绑定，在原页面中调用print.html中的打印事件(为方便表示这里使用jq绑定事件）

$("#btn").on("click",function(){

        document.getElementById('printIframe').contentWindow.iframePrint();

})

至此，点击打印即可实现iframe中内容的打印 ；

///////////////////////////方式二////////////////////////////////////

当然，还有一种方式就是使用媒体查询写两套样式也可实现

<style type="text/css">

    h1 {color:#FF0000;}

    ...网页显示css

</style>

<style type="text/css" media="print">

    h1 {color:#000000;}

    ...打印css

</style>

window.print()打印页面指定内容（使用iframe保证原页面不失效）的更多相关文章

  1. 用window.print()打印指定div里面的内容

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  2. 用window.print()打印指定div里面的内容（转载的）

    用window.print()打印指定div里面的内容 今天客户让添加个打印证照功能,直接用window.print()打印的是整个页面,而用以下方法就可以只打印证明了 <!--window.p ...

  3. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  4. window.print() 打印页面部分内容的方法

    用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...

  5. window.print打印指定html元素中的内容

    通常有些时候我们项目过程中使用到打印功能,而wndow.print便是系统里提供的一个函数. 但是直接使用的话,它打印的将是整个页面的所有元素,而有些时候我们又只需要打印部分内容. <body& ...

  6. Web window.print() 打印

    web打印 window.print() 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的Active ...

  7. 用window.print()打印如何去掉页眉和页脚

    用window.print()打印如何去掉页眉和页脚 2007-07-12 11:44:52|  分类: javascript 知识|举报|字号 订阅     <script language= ...

  8. window.print打印方法实现

    vue中使用window.print打印效果 项目要求 打印每页有10行表格,如果接口数据没有十个显示10行 效果图 第一页 第二页 子组件 <template> <div> ...

  9. window.print打印指定div

    window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head& ...

随机推荐

  1. swift 之归档和解归档

    swift 之归档和解归档 数据持久化的方式有很多种,归档是其中的一种,说起数据持久化的方式,iOS 中基本有以下几种方式:sqlite存储.coredata存储.UserDefault存储.归档.p ...

  2. Caffe、TensorFlow、MXnet三个开源库对比

    库名称 开发语言 支持接口 安装难度(ubuntu) 文档风格 示例 支持模型 上手难易 Caffe c++/cuda c++/python/matlab *** * *** CNN ** MXNet ...

  3. 分析Android-Universal-Image-Loader的缓存处理机制

    最近看了UIL中的缓存实现,才发现其实这个东西不难,没有太多的进程调度,没有各种内存读取控制机制.没有各种异常处理.反正UIL中不单代码写的简单,连处理都简单.但是这个类库这么好用,又有这么多人用,那 ...

  4. FusionCharts MSBar3D图

    1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  5. [php错误]PHP中Notice: unserialize(): Error at offset of bytes in on line 的解决方法

    使用unserialize函数将数据储存到数据库的时候遇到了这个报错, 后来发现是将gb2312转换成utf-8格式之后, 每个中文的字节数从2个增加到3个之后导致了反序列化的时候判断字符长度出现了问 ...

  6. 【javascript】jquery jsonp跨越请求

    <html> <head> <meta charset="utf-8"> <title></title> <scr ...

  7. Java中的大小写字母相互转换（不利用Java自带的方法）

    Java中的大小写字母相互转换(不利用Java自带的方法) 1.设计源码 /** * * @title:UpperAndLower.java * @Package:com.you.utils * @D ...

  8. web开发性能优化---数据库篇

    1. 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2.锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷) 3.返回了不必要的行和列 用OR的字句可以分解成 ...

  9. Tomcat下使用C3P0配置JNDI数据源（在项目的META-INF目录下创建context.xml的文件）

    一.C3P0下载 C3P0下载地址:http://sourceforge.net/projects/c3p0/files/?source=navbar 下载完成之后得到一个压缩包

  10. 【CF17E】Palisection（回文树）

    [CF17E]Palisection(回文树) 题面 洛谷 题解 题意: 求有重叠部分的回文子串对的数量 所谓正难则反 求出所有不重叠的即可 求出以一个位置结束的回文串的数量 和以一个位置为开始的回文 ...