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. Android 大牛的 blog 值得推荐 （转 整理）

    1 收集了 国外著名开发者 25 人,包括 Github 地址.Blog 地址以及重点贡献介绍 链接 收集了 国内部分开发者 32人,包括 Github 地址.Blog 地址以及重点贡献介绍, 链接 ...

  2. 在Salesforce中以PDF的格式显示对应的页面

    在Salesforce中可以简单设置page的属性让页面以pdf的方式显示内容, 当然了我们的page内容可以用Html的方式编写 设置方式为:renderAs="pdf" 请看如 ...

  3. 汇编学习（二）——8086CPU

    一.8086CPU 1.微处理器 (1)微控制机:也称单片机 (2)DSP芯片:数字信号处理芯片 (3)嵌入式微处理器 (4)通用微处理器:PC站.工作站.服务器使用的处理器 2.内部结构: (1)总 ...

  4. 【SQL 数据库】将一张数据表信息复制到另一张数据表

    一.MySQL数据库 1.如果目标表存在 INSERT INTO 目标表  SELECT  * FROM 源表; 2.如果目标表不存在 CREATE TABLE 目标表 SELECT * FROM   ...

  5. XSS 跨站脚本攻击之构造剖析(二)

    1.利用字符编码 (1)字符编码在跨站脚本中经常运用到,透过这种技巧,不仅能让XSS代码绕过服务端的过滤,还能更好的隐藏ShellCode (2)使用一个XSS编码工具,以便对字符串进行十进制和十六进 ...

  6. SU suxcontour命令学习

  7. iOS10 UI教程视图的中心位置

    iOS10 UI教程视图的中心位置 center表示的是视图的中心位置属性,这个属性在相对的UI层次结构上工作,和frame类似.center属性是一个在父视图上定义视图的位置的简便方法.center ...

  8. 分享Kali Linux 2016.2第46周镜像文件

    分享Kali Linux 2016.2第46周镜像文件Kali Linux官网在11月13日发布Kali Linux 2016.2的第46周镜像文件.这次还是保持以往的规模,总共提供了11个镜像文件. ...

  9. sql日期格式化

      0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy      ...

  10. jquery(ajax)与js(ajax)的比较

    原始js: function update_mess(){ var account_name = $("#account").val(); var xmlhttp; if(wind ...