使用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. Linux基础五

    Yum软件包管理 yum:基于rpm包构建的软件更新机制 自动解决软件包依赖关系 所有软件包由集中的yum软件仓库提供. [root@hydra桌面]#ls /misc/cd/repodata/ (r ...

  2. js基本类型与引用类型，浅拷贝和深拷贝

    1. 基本类型: string,number,boolean,null,undefined 2. 引用类型: Function,Array,Object 基本类型:存放在栈内存中的简单数据段,数据大小 ...

  3. js中对一组数组进行求和

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. win10系统搭建虚拟机：VMware Workstation Player 12环境+Ubuntu Kylin 16.04 LTS系统

    笔者小白一枚,其实连虚拟机是个啥都不知道...实属惭愧,介于此所以今天倒腾了一下花了一上午就已经搭建好一个VMware Workstation Player 12免费版的,很哈皮,于是赶紧分享一下. ...

  5. ClientToScreen 和ScreenToClient 用法

    ClientToScreen( )是把窗口坐标转换为屏幕坐标 ScreenToClient( )是把屏幕坐标转换为窗口坐标 屏幕坐标是相对于屏幕左上角的,而窗口坐标是相对于窗口用户区左上角的 VC下, ...

  6. QueryError:Incorrect result size: expected 1, actual 0

    1.错误描述 QueryError:Incorrect result size: expected 1, actual 0 2.错误原因 3.解决办法

  7. iOS - Quartz 2D 贝塞尔曲线

    1.贝塞尔曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支 ...

  8. String.valueOf(Thread.currentThread().getContextClassLoader().getResource("")) 获取项目的绝对路径（shiro项目中来的八）

    一,上代码 String.valueOf(Thread.currentThread().getContextClassLoader().getResource("")) file: ...

  9. js、css等引入文件路径正确，却报404的解决办法

    问题的原因,一般是web.xml文件的过滤器给设置"/"或者"/*"全部拦截了,你可以这样设置过滤器,"*.html"等,就可以正常引用文件 ...

  10. Android破解学习之路（七）—— 乐秀视频编辑 内购破解 专业版 价值25元的破解

    按照之前的支付宝破解,搜索9000的十六进制,之后... 但是,这样测试的时候,没有破解成功,便是继续研究 搜索关键字支付失败,之后找到了指定的smali文件,观察了许久,发现里面有个switch跳转 ...