使用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. python基础 数据类型 判断语句

    python 类unix系统默认已经安装或使用源码包./confighuremakemake install python运行方法 通过交互式解释器 [root@room1pc01 ~]# pytho ...

  2. u盘安装ubuntu10.04 、11.04 server

    10.04 先将 ubuntu server 的 iso 放到优盘上,然后在提示无法找到光驱时,按 alt+f2 打开一个新的 console 窗口,将 iso mount 上,具体操作如下: ls ...

  3. win10 更新系统更新补丁后无法启动处理办法

    win10无法启动不用怕!WinRE恢复环境轻松修复win10系统 Win10技术预览版发布至今,已经整整过去十天时间.经过这段时间的使用体验,小伙伴们有没有遇到一些问题,导致系统出错甚至无法启动呢? ...

  4. 基于 OS X Mavericks 系统

    基于 OS X Mavericks 系统远景论坛黑苹果区新手引导 常见疑难解答 以及必要知识普及帖 请善用论坛搜索功能 认真仔细地阅读置顶帖里的教程以及注意事项 前言:之前建立10.9区求助规范帖时, ...

  5. 让你的微信小程序具有在线支付功能

    前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...

  6. AndroidStudio3.0无法打开Android Device Monitor的解决办法(An error has occurred on Android Device Monitor)

    ---恢复内容开始--- 打开monitor时出现 An error has occurred. See the log file... ------------------------------- ...

  7. springmvc后台取值中文乱码问题

    字符-->字节.字节-->字符时需要用到编码(Encoder).解码(Decoder) 几种编码: ASCII:总共128 ISO-8859-1:涵盖大部分西欧语言字符.一个字符一个字节表 ...

  8. [JZOJ5522] 图

    题目大意: 一个有向图,图中有\(n\)个点\(m\)条边且无重边无自环, 每秒第\(i\)条边出现的概率是\(\frac{p[i]}{100}\), 一开始\(Samjia\)在\(1\)点,每一秒 ...

  9. WC2006水管局长（加强）

    倒过来就变成了加边 然后就直接LCT # include <stdio.h> # include <stdlib.h> # include <iostream> # ...

  10. [BZOJ1051] [HAOI2006] 受欢迎的牛 (强联通分量)

    Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...