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. [Outlook] Outlook2013能收但无法发送邮件-0x800CCC13, 0x800CCC0B, 0x8004210B

    [20140704更新],在公司收邮件的时候,问题再次出现,错误码:0x800ccc13,按照以下方法测试成功: 1. 按照以前办法,反复重启,失败 2. 按照以下参考连接A中的步骤 a. Click ...

  2. WIN7系统下U盘安装Ubuntu双系统

    1. 准备工作 1. 官网下载Ubantu镜像,我下载的是Ubantu14.04.3 LTS版本: 2. 下载 Universal USB Installer (UUI)用于制作U盘启动盘: 3. 下 ...

  3. android selector(转)

    Selector的结构描述: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:a ...

  4. 用ajax和js怎么做出滚动条滚到最下面分页

    获取滚动条位置(scrollTop) 获取可视窗口高度(viewportHeight) 获取整个页面可滚动高度(scrollHeight) 当scrollTop+viewportHeight==scr ...

  5. LoadRunner 脚本学习 -- 指针基础

    先搞清楚 ++a 和 a++的区别 ++a : 前缀++,  先自增,后表达式 a++ : 后缀++,  先表达式,后自增 前缀,自增立即生效. 后缀,下次才会看到效果. 一维数组的指针 Action ...

  6. 【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码

    jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...

  7. js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  8. Jmeter之csv、用户自定义变量以及Query Type分析（八）

    很多童鞋不知道对于Jmeter的Query Type 不知道选哪个,为什么选,怎么选! 下面这边做个简单的分析, 那么首先什么是CSV Data Set Config,有什么用呢? CSV Data ...

  9. 使用Hue上传hive数据

    大概逻辑是先上传hdfs数据,然后创建hive外部表,关联到hdfs上传数据的位置. 截图比较概要,但是用起来很简单 1.创建路径和上传文件 2.创建外部表

  10. ROC曲线绘制

    ROC 曲线绘制 个人的浅显理解:1.ROC曲线必须是针对连续值输入的,通过选定不同的阈值而得到光滑而且连续的ROC曲线,故通常应用于Saliency算法评价中,因为可以选定0~255中任意的值进行阈 ...