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. c中malloc的用法

    转自:http://blog.sina.com.cn/s/blog_966f8e8501010if7.html Malloc 向系统申请分配指定size个字节的内存空间.返回类型是 void* 类型. ...

  2. memcpy与memmove的区别

    在面试中经常会被问道memcpy与memove有什么区别? 整理如下: 其实主要在考C的关键字:restrict C库中有两个函数可以从一个位置把字节复制到另一个位置.在C99标准下,它们的原型如下: ...

  3. EF中无法使用时间转字符串

    场景: 查询条件需要使用到时间类型,且需要特殊格式化,例:ToString("yyyy-MM-dd"):即,在需要使用时间进行like方式处理时: 此时,用如下方式: var q ...

  4. Java中synchronized详解

    synchronized 原则: 尽量避免无谓的同步控制,同步需要系统开销,可能造成死锁 尽量减少锁的粒度 同步方法 public synchronized void printVal(int v) ...

  5. Codeforces Beta Round #89 (Div. 2) E. Bertown roads（Tarjan、边双连通分量）

    题目链接:http://codeforces.com/problemset/problem/118/E 思路:首先要判断图是否是边双连通,这个Tarjan算法可以判断,若low[v] > dfn ...

  6. 【hibernate 执行方法未插入数据库】hibernate的save方法成功执行，但是未插入到数据库

    今天做项目,碰上这个问题: hibernate的save方法成功执行,但是未插入到数据库. Dao层代码: @Override public void save(T t) { this.getSess ...

  7. HDU 3461 Code Lock（并查集）

    很好的一个题,思想特别6 题意:给你小写字母个数n,每个字母可以向上翻动,例如:d->c,a->z.然后给你m对数(L,R)(L<=R),表示[L,R]之间可以同时向上翻动,且翻动后 ...

  8. An easy problem

    An easy problem Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  9. JavaScrip入门（3）

    函数: var m2=function(){ console.log('2222'); } console.log(typeof(m2)); 输出结果:test.html:31 function js ...

  10. PHP学习笔记（一）

    by Alina.Xia, dated on 2016.11.27 一.MyAql数据库PHP在开发web站点或管理一些系统时,需要对大量的数据进行保存.XML文件和文本文件虽然可以作为数据的整体,但 ...