web页面实现指定区域打印功能

第一种方法:使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。

详细如下:

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

要打印的内容。哈哈!

<p class="noprint">将不打印的代码放在这里。</p>

<p >打印的代码放在这里。</p>

<button class="noprint" type="button" onclick="window.print()">print button</button>

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

把要打印的内容放入一个 span中,然后通过一个函数打印。

<div>

所有内容

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

</div>

<script>

function printme()

{

let oldBody = document.body.innerHTML // 保存

document.body.innerHTML=document.getElementById(‘div1‘).innerHTML;

window.print();

document.body.innerHTML = oldBody // 恢复

}

</script>

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

第三种方法:如果要打印的页面排版和原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)+17);

prnhtml=prnhtml.substring(0,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>

原文地址:https://www.cnblogs.com/changfeng1800/p/11287741.html

时间: 2024-11-07 02:22:48

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

python xpath 获取指定页面中指定区域的html代码

最近一个朋友问我怎么把一个指定区域的内容转成pdf,网上查了一下python里面有个wkhtmltopdf模块可以将str.file.url转成pdf,我们今天不聊怎么转PDF,聊聊怎么获取页面中指定区域的html源码.用到的模块是lxml和requests这两个模块,没有装的小伙伴可以装一下 pip install  lxml requests 主要思想是利用xpath获取到指定区域的Element对象,然后再将Element对象传给etree.tostring(),即可得到指定区域的html

js为页面的指定区域生成base64图片

需要一个封装好的html2canvas.js /* html2canvas 0.4.1 <http://html2canvas.hertzen.com> Copyright (c) 2013 Niklas von Hertzen Released under MIT License */ (function(window, document, undefined){ "use strict"; var _html2canvas = {}, previousElement,

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

本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <style media="print" type="text/css"> .noprint{visibility:hidden} </style>这 里是要打印的内容.<p class="noprint">这里是不打印的内

WEB页面打印--打印指定区域,页面预览,页面设置

转载http://hi.baidu.com/zyb512/blog/item/e9cf70441ce0984a500ffe79.html 1.利用组件把报表的内容生成WORD文档或者是Excel文档,导出以后利用Office自带的打印功能进行打印 2.在网页上利用javascript或者是其他基于javascript和其他语言的组建 下面详细介绍这两种方法 1.生成word或者是Excel文档,当要打印的区域内容为文本的时候适合导出为Word文档来处理,当要打印的内容为表格的时候适合导出为Exc

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

背景 首先,说说文章的背景.近期手中的一个项目,因为需求中要求提供Web界面的打印功能.当然假设没有打印机,还能够提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分忧解难的思想,领了任务之后,就立即開始了工作. 问题 刚開始的时候.组长给了一个工具(jatoolsprinter)让我研究.我用了一个多小时的时间,做出了一个简单的Demo,然后就是各种的測试,因为 web 打印须要浏览器安装 ActiveX 组件.在随后的測试中,我用了几款浏览器.甚至把安全级别都调到了最

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

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

js打印WEB页面内容代码大全

第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="text/css">   .noprint{visibility:hidden}   </style>   要打印的内容.哈哈!<p class="noprint">将不打印的代码放在这里.</p><a href="javasc

web 打印功能

在项目开发中有时候会碰到要求打印页面中的数据的功能需求.需求原因主要有两点吧,一是需要打印的数据只是页面的一部分即页面的区域打印,比如只需要打印页面中表格里面选中的数据等,二是需要打印出来的样式和页面展示的样式有差别,比如需要将表格中的列竖着打印出来. 我在开发中主要用到的就是window.print()这个js函数,这个函数相当于在页面中右键打印那个功能,但如果直接使用这个函数会将整个页面打印出来.所以我们对页面数据的隐藏或者重写一个页面,得到我们想要打印的数据和样式. 1.隐藏不需要打印的数

如何在Web页面中集成文件上传功能

当前,个人主页制作非常流行.当用户开发好自己的页面时,需要将文件传输到服务器上,解决这个问题的方法之一 是运行FTP服务器并将每个用户的FTP默认目录设为用户的Web主目录,这样用户就能运行FTP客户程序并上传文件到指定的 Web目录.由于Windows NT 和 Windows98均不提供直接的基于窗口形式的FTP客户程序,用户必须懂得如何使用基于命令行 的FTP客户,或掌握一种新的基于窗口形式的FTP客户程序.因此,这种解决方案仅对熟悉FTP且富有经验的用户来说是可行 的. 如果我们能把文件