js实现页面局部弹窗打印

时间：2022-03-28 02:10:23

原文出自：http://www.haorooms.com/post/css3media

在网页中经常看到有打印功能，点击之后，只针对特定区域进行的打印。网上看了一下，大体上有2中实现方法，一种是用css @media控制，另一种是直接用js控制。下面分别来对其进行说明一下！

一、css控制网页局部打印

关于css控制打印，css @media 参考地址：http://www.haorooms.com/post/css3media（主要是介绍Media Query方法）也引进了css2的media

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

media可以是all,也可以是print ,加入是print，那么这个css只有在打印的时候才加载。那么这样就好办了，我们可以写针对css打印的样式，有些地方在打印的时候不显示，那么直接用display：none来设置不就可以了嘛！

除了上面的这种写法之外，还可以这么写：

@media print {

.noprint { display: none; }

}

当你打印的时候noprint 类下面的所有内容不显示，不打印的时候显示。

举例：

<div class="noprint" >

<table style="margin:0 auto;width:500px;">

    <tr align="center" ><td>

      <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"

                    width="0">

      </object>

  <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)">

  <input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)">

<input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)">

  <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)">

    </td></tr>

</table>

</div>

这些内容在打印之前是显示的，当你点击打印的时候，会用上面的样式，不显示。达到了局部打印的效果！

二、js局部打印

直接上案例：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>js局部打印案例</title>

 <script type="text/javascript">

     function doPrint() {

         bdhtml=window.document.body.innerHTML;

         sprnstr="<!--startprint-->"; // 打印开始标识

         eprnstr="<!--endprint-->";   //打印结束标识

         prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

         prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

 　　　　//新打开窗口打印（需要引用原页面样式文件）

   　　  var newWin = window.open("",'newwindow','height=700,width=750,top=100,left=200,toolbar=no,menubar=no,resizable=no,location=no, status=no');

     　　newWin.document.write(prnhtml);

     　　newWin.print();

    　　　//当前窗口打印

         window.document.body.innerHTML=prnhtml;

         window.print();

 }

 </script>

 </head>

 <body>

 <p>1不需要打印的地方</p>

 <p>2这里不要打印啊</p>

 <!--startprint--><!--注意要加上html里star和end的这两个标记~-->

 <h1>打印标题</h1>

 <p>打印内容~~</p>

 <!--endprint-->

 <button type="button" onclick="doPrint()">打印</button>

 <p>不打印的地方</p>

 <p>2</p>

 </body>

 </html>

注：

1、JS打开新窗口并填充内容的两种方式：

　　i、write内容

var newWin=window.open("childWindow.html");

newWin.document.write("");

newWin.document.write(document.getElementByIdx_x("fatherWindowTable").outerHTML);

　　这种方式缺点是新窗口一直处于Loading状态。

　　ii、innerHTML内容

var newWin=window.open("childWindow.html");

newWin.onload=function()

{

newWin.document.title='childWindowTitle';

newWin.document.getElementByIdx_x('childWindowId').innerHTML=document.getElementByIdx_x("fatherWindowTable").outerHTML;

}

2、Js打开新窗口：Window.open() 方法参数：

　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。
参数 | 取值范围 | 说明 
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上  depended | yes/no | 是否和父窗口同时关闭 
directories | yes/no | Nav2和3的目录栏是否可见  height | pixel value | 窗口高度 
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 
innerHeight | pixel value | 窗口中文档的像素高度 
innerWidth | pixel value | 窗口中文档的像素宽度  location | yes/no | 位置栏是否可见 
menubar | yes/no | 菜单栏是否可见 
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 
resizable | yes/no | 窗口大小是否可调整  screenX | pixel value | 窗口距屏幕左边界的像素长度 
screenY | pixel value | 窗口距屏幕上边界的像素长度  scrollbars | yes/no | 窗口是否可有滚动栏 
titlebar | yes/no | 窗口题目栏是否可见  toolbar | yes/no | 窗口工具栏是否可见 
Width | pixel value | 窗口的像素宽度  z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

3、禁用/清除window.open缓存：

i、在Asp页面首部加入  
   Response.Buffer   =   True    
   Response.ExpiresAbsolute   =   Now()   -   1    
   Response.Expires   =   0    
   Response.CacheControl   =   "no-cache"    
   Response.AddHeader   "Pragma",   "No-Cache"  
ii、在HtML代码中加入  
   <HEAD>  
   <META   HTTP-EQUIV="Pragma"   CONTENT="no-cache">  
   <META   HTTP-EQUIV="Cache-Control"   CONTENT="no-cache">  
   <META   HTTP-EQUIV="Expires"   CONTENT="0">  
   </HEAD>  
iii、在重新调用原页面的时候在给页面传一个参数  
   Href="****.asp?random()"  
iv、xxx.aspx.cs中:  
   Context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

js实现页面局部弹窗打印的更多相关文章

  1. js 实现页面局部（或图片）放大功能&lpar;vue&rpar;

    方法: adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.style ...

  2. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  3. 使用Js将页面打印或保存为Pdf

    很久没有写前端的文章了,今天就来说说js一个比较方便的功能,打印当前页面或保存成pdf吧. js有一个原生的函数,print(),顾名思义就是打印.但是有时候我们需要打印页面某些部分,所以需要对页面进 ...

  4. ehcache实现页面整体缓存和页面局部缓存

    之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数 ...

  5. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  6. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

  7. HTML页面局部刷新

    /.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...

  8. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  9. （转）基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...

随机推荐

  1. SQLSERVER中的假脱机spool

    SQLSERVER中的假脱机spool 我发现网上对于假脱机的解释都非常零散,究竟假脱机是什么? 这几天在家里研究了一下,收集了很多网上的资料 假脱机是中文的翻译,而英文的名字叫做 spool 在徐老 ...

  2. java中获取接口（方法）中的参数名字&lpar;eclipse设置编译参数&rpar;（java8 javac -parameters）

    interface接口参数 jdk1.7及以前使用spring功能实现的: 注意: 1.该功能只能获取类的方法的参数名,不能获取接口的方法的参数名. public static void test() ...

  3. ubuntu 安装 wkhtmltopdf 的方法

    参考自:http://vivianyw.blog.163.com/blog/static/1345474222014334256367/ wkhtmltopdf有编译好的Linux版本,找到http: ...

  4. ORACLE CentOS5&period;6安装

    1 准备 CentOS 5.6企业版 oracle11g fs 安装.安装环境为vmware虚拟机.另外,本安装文档非常简洁,但关键步骤都指出来了,其他的都是默认选择,遇到不知该如何选择的操作或者问题 ...

  5. 替换、恢复Html中的特殊字符

    public static string HtmlEncode(string theString){theString = theString.Replace(">", &q ...

  6. 康乐不风流之爱解题的pde灌水王张祖锦

    康乐不风流之爱解题的pde灌水王张祖锦 师弟: 邓洪存 (现在烟台大学任教) 好吧, 我一直想写写康乐园里与我相熟的这几个人, 不如趁此机会开始. 第一批人物为张祖锦.苏延辉.张会春.黄显涛.刘兴兴. ...

  7. 创建通用型framework

    http://years.im/Home/Article/detail/id/52.html http://www.cocoachina.com/industry/20131204/7468.html ...

  8. MVC中如何实现本地化的解决方案

    1. Q: 什么是本地化? A: 本地化是指企业在国际化过程中,为了提高市场竞争力,同时降低成本,将产品的生产.销售等环节按特定国家/地区或语言市场的需要进行组织,使之符合特定区域市场的组织变革过程. ...

  9. 弹出浮层css&plus;JQuery

    先来张效果图: HTML代码如下: <body> <div class="bg" id="bg" style="display: n ...

  10. 栈-&gt&semi;栈的基本定义

    定义: 栈是限定仅在表尾进行插入或删除操作的线性表.因此,对栈来说,表尾端有特殊含义,称为栈顶,相应地,表头端称为栈底.不含元素的空表成为空栈. 示意图: 顺序栈的表示和实现 可以在初始化时分配一块连 ...

相关文章