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">打印</a>



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



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



<span id='div1'>把要打印的内容放这里</span>

<p>所有内容</p>

<div id="div2">div2的内容</div>

<a href="javascrīpt:printme()" target="_self">打印</a>



<scrīpt language="javascrīpt">

function printme()

{

document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;

window.print();

}

</scrīpt>



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



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



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


----------------------------------------------------------------------------------
JS 代码  

<script type="text/javascript">

// JScript 方法 拷入页面即可

function preview1() {

bdhtml=window.document.body.innerHTML;

sprnstr="<!--startprint-->";

eprnstr="<!--endprint-->";

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

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

window.document.body.innerHTML=prnhtml;

window.print();

}

</script>

JS 代码  

<body>

//在页面上调用js方法

<a href="javascript:preview1();">打印此页</a>

<div style="display: none">

<!--startprint-->

打印信息内容 写在此处、、、

<!--endprint-->

</div>

</body>

web页面实现指定区域打印功能的更多相关文章

  1. css table 布局 与 JavaScript 指定区域打印功能

      <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="conte ...

  2. vue项目-打印页面中指定区域的内容（亲测有效！）

    关于打印整个页面的,没什么好说的.今天我给大家分享一个打印指定区域的方法,你想打印哪里,就打印哪里! 我也是刚刚开始接触打印这一块功能的,然后当然是找度娘深入了解了一番啦,期间试了网上的各种方法,有的 ...

  3. 关于WEB页面的强制分页打印问题

    最近项目中有个需求要求打印web页面数据,但是碰到打印预览显示数据时,多的数据就不翼而飞了(不分页),搞的很是焦灼~ 最先是以为纸张的问题,胡乱折腾了一番,把A4约硬是改成了LARGE号的纸,多的数据 ...

  4. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  5. JS达到Web指定保存的和打印功能的内容

    背景 首先,说说文章的背景.近期手中的一个项目,因为需求中要求提供Web界面的打印功能.当然假设没有打印机,还能够提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分 ...

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

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

  7. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  8. web页面内容打印总结

    web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...

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

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

随机推荐

  1. MySQL数据库自带备份与恢复工具:MySQLdump.exe与mysql.exe

    数据库的备份工作是保护数据库正常运行的关键,以下的文章主要讲述的是MySQL数据库备份的一些小妙招,我们大家都知道使用MySQL dump备份数据库的用户所需要的权限相对而言还是比较小的,只需要sel ...

  2. 函数式编程语言LISP，python，haskell，clojure

    说说我自己的背景吧,我是个半吊子的程序员,做任何事情喜欢比较了解然后再尝试,我接触过很多语言,大多数都把它当成工具来使用 我现在的工作大部分主要在于数据挖掘与机器学习方面,也学习web开发,我第一个拿 ...

  3. iOS 钥匙串 指纹识别 get和Post请求的区别

    01-钥匙串 1. 通过系统提供的钥匙串功能可以在本地保存密码,系统使用AES的方式对密码加密 a. 查看Safari中保存的密码 2. 使用第三方框架SSKeychain把密码保存到钥匙串和获取钥匙 ...

  4. nginx 引号 x22

    这个好像是nginx故意这样做的. 因为Nginx默认的log_format使用双引号作为间隔符,为了避免日志分析时候出现混乱,所以将双引号解析为x22了. 只能每天日志切割的时候,自己替换日志中的x ...

  5. Java常用命令

    jps    查看java进程的PID java -XX:+PrintFlagsInitial    显示所有可设置参数及默认值 java -XX:+PrintFlagsFinal    获取到所有可 ...

  6. Angular JS 学习之服务(Service)

    1.AngularJS中,可以创建自己的服务,或使用内建服务: 2.在AngularJS中,服务是一个函数或对象,可在你的AngularJS应用中使用: AngularJS内建了30多个服务:有个$l ...

  7. 2016.9.1 JavaScript入门之五

    1.数据类型:对象:也可以被认为是一个键/值存储,像一个字典.可以取代switch{case:case:}或者if else 例如: function phoneticLookup(val) { va ...

  8. js-高级技术

    高级技术: 1.function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new ...

  9. eclipse安装genymotion的奇葩问题

    安装方法: 1:启动Eclipse 2:打开"Help/Install new software"菜单 在新开启的窗口中点击"add"按钮(位于窗口右上方) 在 ...

  10. WordPress用户注册无法发送密码邮件怎么回事？

    wordpress无法发送电子邮件.可能原因:您的主机禁用了 mail() 函数 等等几句话.在网上一搜,很快找到了解决方案:使用wp-mail-smtp插件. 一.插件下载安装.可以在wordpre ...