打印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调整或容器包容 打印容器内的内容就可以了
时间: 2024-10-13 14:50:41

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

HTML中button标签点击实现页面跳转的三种方法

方法1:使用onclick事件12<input type="button" value="按钮"onclick="javascrtpt:window.location.href='http://www.9252.com/'" /> 或者直接使用button标签1<button onclick="window.location.href = 'https://www.9252.com/'">儿童</

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

php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪造欺骗的,有三种方法可以伪造和欺骗$_SERVER['HTTP_REFERER'] 第一种方法:file_get_contents $url = "http://localhost/test/test.php"; $refer="http://www.aa.com";

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

第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档加载完成后执行.就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果.包括在加载外部图片和资源之前. }); 第三种 jQuery(function($){ }); window.onload=function(){ //onload事件是js 中的代码

scrollview滚动到指定区域的两种方法

方法一:利用偏移量来滚动 - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; 方法二:利用rect来滚动 - (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated; 注意点:如何使用scrollRectToVisible:animated:这个方法,需要把contentSize的width和height都不能为0,否则不能滚动.

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

第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="text/css">   .noprint{visibility:hidden}   </style>   要打印的内容.哈哈!<p class="noprint">将不打印的代码放在这里.</p><a href="javasc

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

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把查询结果的 HTML 代码呈现到 Razor 视图中,考虑到灵活性,需要能在任意 Razor 视图中调用该方法,这样任意 Razor 页面都能以统一的方式方便地共享该页面部件的 HTML 内容,这对于代码的重用性和可维护性都是非常有必要的. 为实现上述要求,本文介绍如下可供选择的三种方式.   1.

[mysql]三种方法为root账户指定密码

前言:前段时间把mysql安装后一直没管它,当时就在奇怪为什么mysql登陆不要密码,原来一直用的超用户账户登陆的(简称超级用户) 其实只怪自己太无知,之前一直用的phpbydamin进行的数据库的可视化管理,哪里知道这么详细呢? 本文原文来源mysql官方文档5.1 正文:最开始可以使用SELECT User.Password FROM mysql.user查询mysql数据库root账户的密码 你可以用几种方法为root账户指定密码.以下介绍了三种方法: ·         使用SET PA

夺命雷公狗jquery---17页面载入的三种方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> //第一种方法 /* $(document).ready(function(){ $('#btnok')[0].onclick =

每天一个JavaScript实例-确定web页面的区域

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-确定web页面的区域</title> <script> function size(){ var width = 0; var heigh