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. [Linux] 获得系统位数

    三种方法获得系统多少位: 以下三个例子都得到的是64位的系统 1. getconf LONG_BIT 2. echo $HOSTTYPE 3. uname –a

  2. HDU 5875 Function st + 二分

    Function Problem Description   The shorter, the simpler. With this problem, you should be convinced ...

  3. 智能车学习（四）—— Cmp学习

    一.代码共享 1.cmp.h #ifndef HSCMP_H #define HSCMP_H //1 头文件 #include "common.h" //2 宏定义 //2.1比较 ...

  4. 关于转换大写中文金额-新学的java函数整理

    toCharArray public char[] toCharArray() 将此字符串转换为一个新的字符数组. 返回: 一个新分配的字符数组,它的长度是此字符串的长度,而且内容被初始化为包含此字符 ...

  5. Released Mocked Streams for Apache Kafka

    Kafka Streams is a de­ploy­ment-ag­nos­tic stream pro­cess­ing li­brary writ­ten in Java. Even thoug ...

  6. Android回调接口的写法

    方法一: 定义一个接口,里面写想要对外提供的方法,在逻辑层方法的参数里传递进去,让在需要的时候调接口里的方法. 实例一: public class SmsUtils { public interfac ...

  7. express－11 表单处理(2)

    处理AJAX表单 用Express处理AJAX表单非常简单:甚至可以使用相同的处理程序来处理AJAX请求和常规的浏览器回退. HTML文件 (/views/newsletter.handlebars) ...

  8. 运行page页面时的事件执行顺序

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  9. NumPy 学习（3）： 通用函数

    1.  元素级别的函数 元素级别的函数也就是函数对数组中的每一个元素进行运算.例如: In [10]: arr = np.arange(10) In [11]: np.sqrt(arr) Out[11 ...

  10. 把文本框嵌入到form

    <form action="/submit-cat-photo"> <input type="text" placeholder=" ...