使用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. 学习PHP的必备开发工具

    对于PHP开发者,在互联网上有很多可用的开发工具,但对于初学者不知道哪个php开发工具比较好,找到一个合适的PHP开发工具是很难的,需要花费很多的时间精力.所以,今天常青春工作室就为初学者推荐几个最好 ...

  2. shell脚本基础1 概述及变量

    shell概述:在linux内核与用户之间的解释器程序通常指/bin/bash负责指向内核翻译及传达用户/程序指令相当于操作系统的"外壳" shell的使用方式:交互式--命令行: ...

  3. 类似fabric主机管理demo

    类似于fabric的主机管理系统 可以批量对主机进行操作 批量上传文件 批量下载文件 批量执行命令 demo代码 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  4. NLP+语篇分析（五）︱中文语篇分析研究现状（CIPS2016）

    摘录自:CIPS2016 中文信息处理报告<第三章 语篇分析研究进展.现状及趋势>P21 CIPS2016 中文信息处理报告下载链接:http://cips-upload.bj.bcebo ...

  5. vc6.0转vs2005中字符串的问题

    简单一点:就是project->Property->Configuration Property-->general-->Character Set:No Set即可.详细分析 ...

  6. dojo CsvStore简介

    dojox.data.CsvStore 作者:Jared Jurkiewicz 版本:V1.0 CsvStore是由dojo提供的简单的只读存储,并且是包含在dojox项目中的.CsvStore是读取 ...

  7. C#:几种数据库的大数据批量插入

    在之前只知道SqlServer支持数据批量插入,殊不知道Oracle.SQLite和MySql也是支持的,不过Oracle需要使用Orace.DataAccess驱动,今天就贴出几种数据库的批量插入解 ...

  8. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  9. 网络协议笔记-网络层-ARP协议

    [2-地址解析协议ARP] [2.1-基本概念] 地址解析协议ARP的作用是根据主机的IP地址,找出该主机的硬件地址. [2.2-为什么要使用ARP] 在数据传输过程中,网络层使用的IP地址,但是在实 ...

  10. 【BZOJ4566】找相同字符（后缀自动机）

    [BZOJ4566]找相同字符(后缀自动机) 题面 BZOJ 题解 看到多串处理,\(SA\)就连起来 \(SAM???\) 单串建自动机 然后其他串匹配 对于一个串建完\(SAM\)后 另一个串在\ ...