本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧。

  第一种方法:使用CSS

  定义一 个.noprint的class,将不打印的内容放入这个class内。

  代码如下:

<style media="print" type="text/css"> 
.noprint{visibility:hidden} 
</style>
这 里是要打印的内容。
<p class="noprint">这里是不打印的内容。</p>
<a href="javascrīpt:window.print()" target="_self"& gt;打印</a>

  第二种方法:指定打印区域

   把要打印的内容放入一个span或div,然后通过一个函数打印。

  代码如下:

<span id="div1">这里是要打印的内容</span& gt;
<p>所有内容</p>
<div id="div2">div2的内容</div& gt;
<a href="javascrīpt:printme()" target="_self">打印</a>
<script language="javascript">
function printme(){
 document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
 window.print();
}
</script>

   如果要打印的只是整个页面中的一小部分,最好采用第二种方法。

  第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种 方法。

  点击打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新 窗口。

网页设计----打印网页指定区域

<script language=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));
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}
</script> <!--startprint-->在需要打印的内容<!--endprint--> <input type="button" onClick="doPrint()" value="打印" /> // 页面上的内容大小调整可以css调整或容器包容 打印容器内的内容就可以了

打印web页面指定区域的三种方法的更多相关文章

  1. php 伪造HTTP_REFERER页面URL来源的三种方法

    php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪 ...

  2. ASP.NET页面跳转的三种方法比较

    在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...

  3. web页面实现文件下载的几种方法

    今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web页面中嵌入 url超级链接,标准的 ...

  4. Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求

    第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档 ...

  5. ionic2 中隐藏子页面tabs选项卡的三种方法

    第一种: 隐藏全部子页面的tabs选项界面 找到app.module.ts文件 ,修改如下代码 imports: [ IonicModule.forRoot(MyApp,{ tabsHideOnSub ...

  6. js灵活打印web页面区域内容的通用方法

      我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...

  7. js打印WEB页面内容代码大全

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...

  8. YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

    上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

  9. IDEA+Maven+Tomcat构建Web项目的三种方法

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 本文将介绍三种方 ...

随机推荐

  1. linux 输入子系统(1)----系统概述

    输入设备的工作中,只是中断.读键值/坐标值是设备相关的,而输入事件的缓冲区管理以及字符设备驱动的file_operations接口则对输入设备是通用的,基于此,内核设计了input输入子系统,由核心层 ...

  2. ubuntu下Django的下载与安装(三种方法)

    方法一: 1下载: 1 安装python,Linux系统下,一般是安装好的,可以输入如下命令查看 python -V 如果没有安装,则需要安装,安装方法如下,首先从官网下载源码,然后: (1) $ t ...

  3. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  4. Kinetic使用注意点--layer

    new Layer(config) 参数: config:包含所有配置项的对象. { clearBeforeDraw: "是否在绘图之前清空画板,默认为true", x: &quo ...

  5. oracle 将科学计数法数据转换为非科学计数法数据

    oracle 自定义函数: CREATE OR REPLACE FUNCTION ConvertNumeric(rawData VARCHAR2) --用于返回转换科学计算法dhx RETURN VA ...

  6. 【maven项目结构】module 生成独立的jar

    生成jar 生成jar的过程会出现以下问题: clean完了之后就会出现以下问题: install [INFO] Scanning for projects... [INFO] [INFO] ---- ...

  7. eclipse 书签

    虽然eclipse有back to和forward两个功能帮助我们阅读代码,但有时候代码一层一层看下去后,会忘了自己最初的起点. 因此想到了eclipse的书签bookmark功能. 首先,添加书签. ...

  8. maven+tomcat6-maven-plugin实现热部署及调试

    maven project,特别是maven module项目默认情况下是是无法直接通过tomcat等容器部署的,如图,我要部署fastdev_web这个maven module,可以看出在tomca ...

  9. php数组内容分页的例子(转)

    php数组内容分页代码 时间:2016-03-04 23:46:34来源:网络 导读:php数组内容分页代码,当前页如果大于总页数,当前页为最后一页,分页显示时,应该从多少条信息开始读取数据.   p ...

  10. 3.3 spring-meta子元素的使用与解析

    1. meta元素的使用 在解析元数据的分析之前,我们先回顾一下 meta属性的使用: <bean id="car" class="test.CarFactoryB ...