打印web页面指定区域的三种方法
本文和大家分享一下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页面指定区域的三种方法的更多相关文章
- php 伪造HTTP_REFERER页面URL来源的三种方法
php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪 ...
- ASP.NET页面跳转的三种方法比较
在ASP.NET下,经常需要在页面之间跳转,下面我们来分别介绍一下关于.NET中Response.Redirect(),Sever.Execute(),Server.Transfer() 三种页面跳转 ...
- web页面实现文件下载的几种方法
今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web页面中嵌入 url超级链接,标准的 ...
- Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求
第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档 ...
- ionic2 中隐藏子页面tabs选项卡的三种方法
第一种: 隐藏全部子页面的tabs选项界面 找到app.module.ts文件 ,修改如下代码 imports: [ IonicModule.forRoot(MyApp,{ tabsHideOnSub ...
- js灵活打印web页面区域内容的通用方法
我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...
- js打印WEB页面内容代码大全
第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...
- YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法
上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...
- IDEA+Maven+Tomcat构建Web项目的三种方法
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 本文将介绍三种方 ...
随机推荐
- linux 输入子系统(1)----系统概述
输入设备的工作中,只是中断.读键值/坐标值是设备相关的,而输入事件的缓冲区管理以及字符设备驱动的file_operations接口则对输入设备是通用的,基于此,内核设计了input输入子系统,由核心层 ...
- ubuntu下Django的下载与安装(三种方法)
方法一: 1下载: 1 安装python,Linux系统下,一般是安装好的,可以输入如下命令查看 python -V 如果没有安装,则需要安装,安装方法如下,首先从官网下载源码,然后: (1) $ t ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- Kinetic使用注意点--layer
new Layer(config) 参数: config:包含所有配置项的对象. { clearBeforeDraw: "是否在绘图之前清空画板,默认为true", x: &quo ...
- oracle 将科学计数法数据转换为非科学计数法数据
oracle 自定义函数: CREATE OR REPLACE FUNCTION ConvertNumeric(rawData VARCHAR2) --用于返回转换科学计算法dhx RETURN VA ...
- 【maven项目结构】module 生成独立的jar
生成jar 生成jar的过程会出现以下问题: clean完了之后就会出现以下问题: install [INFO] Scanning for projects... [INFO] [INFO] ---- ...
- eclipse 书签
虽然eclipse有back to和forward两个功能帮助我们阅读代码,但有时候代码一层一层看下去后,会忘了自己最初的起点. 因此想到了eclipse的书签bookmark功能. 首先,添加书签. ...
- maven+tomcat6-maven-plugin实现热部署及调试
maven project,特别是maven module项目默认情况下是是无法直接通过tomcat等容器部署的,如图,我要部署fastdev_web这个maven module,可以看出在tomca ...
- php数组内容分页的例子(转)
php数组内容分页代码 时间:2016-03-04 23:46:34来源:网络 导读:php数组内容分页代码,当前页如果大于总页数,当前页为最后一页,分页显示时,应该从多少条信息开始读取数据. p ...
- 3.3 spring-meta子元素的使用与解析
1. meta元素的使用 在解析元数据的分析之前,我们先回顾一下 meta属性的使用: <bean id="car" class="test.CarFactoryB ...