使用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. css动画--元素上下跳动

    在H5场景动画时,常常会用到着一样一个效果,箭头持续上下跳动来引导用户上下滑动整个页面 <!DOCTYPE html > <html> <head> <met ...

  2. ImportError: No module named 'Box2D' 解决办法

    ImportError: No module named 'Box2D'这个问题是由于缺少gym Openai gym是一个用于开发和比较RL算法的工具包,与其他的数值计算库兼容,如tensorflo ...

  3. VxWorks 任务

    任务:在执行时每个程序都被称之为任务.VxWorks操作系统中,任务可以直接地或者以共享方式访问大多数系统资源,为了维护各自的线程,每个任务必须保持有足够的上下文环境.(1)    任务状态:就绪(R ...

  4. BT656跟BT1120和BT709有什么区别

    601是SDTV的数据结构 656是SDTV的interface709是HDTV的数据结构 1120是HDTV的interface从数据结构上 都是Y Cb Cr只是SDTV用4:2:2   HDTV ...

  5. l【linux】linux rpm包命名规范

    RPM包的一般格式为:name-version-arch.rpmname-version-arch.src.rpm name:软件包名称.version:带有主.次和修订的软件包版本.arch:硬件平 ...

  6. （二十五）svn的问题

    今天更新代码到svn中的时候出现了错误,准确的说是在操作更新之前的步骤出现了错误,因此对svn有了更近一步的理解.    check:下载svn中的代码到指定的储存路径中:    update:更新s ...

  7. monkey日志分析

    Monkey测试的og分析,我们可以通过几个关键词来判断测试是否通过.1)Monkey finished打开LOG,查看log的最下端,是否有类似以下字段:## Network stats: elap ...

  8. 过滤文件代码 python

    import os import cv2 import shutil # store all file in directory global totalFileList totalFileList ...

  9. Python基础_函数闭包、调用、递归

    这节的主要内容是函数的几个用法闭包,调用.递归. 一.函数闭包 对闭包更好的理解请看:https://www.cnblogs.com/Lin-Yi/p/7305364.html 我们来看一个简单的例子 ...

  10. linux用户和群组

    1.用户的主要群组和次要群组   切换用户:su -username 查看群组:#vi /etc/passwd         //主要群组                  #vi /etc/gro ...