web页面局部打印

最新推荐文章于 2024-03-21 10:27:19 发布
最新推荐文章于 2024-03-21 10:27:19 发布
阅读量287 收藏 1
点赞数 2
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37932700/article/details/103165695
版权
利用 css 的 @media print 设置打印样式

思路：

  1. 把需要打印的内容用一个容器包裹(容器变量为: printDom)；
  2. 创建一个新容器(主要是无副作用，自己创建的元素自己可控，printDom容器不能确定能不能改样式，新容器变量为: newPrintDom，方法: document.createElement(‘div’))；
  3. 创建一个样式元素style，设置样式(控制打印元素和非打印元素的显示和隐藏，具体样式见下方代码)；
  4. 把printDom容器克隆一份添加到新容器(方法: newPrintDom.appendChild(printDom.cloneNode(true)))；
  5. 把新容器(newPrintDom)和style元素添加至body；
  6. 最后调用window.print方法，打印后移除新容器(newPrintDom)和style元素，大功告成；

代码：

<body>
	<div>
		<p>不需要打印的内容</p>
		<p>不需要打印的内容</p>
		<p>不需要打印的内容</p>
	</div<
最低0.47元/天 解锁文章
我命由我不由天！
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web 打印（部分打印）
03-22
NULL 博文链接：https://cd0281.iteye.com/blog/903414
js或jquery实现页面打印可局部打印
10-26
在Web开发中，有时我们需要提供用户一个功能，即能够从网页上打印特定的内容，而不是整个页面。本文将详细介绍如何使用JavaScript（以及jQuery库）来实现这样的局部打印功能。 首先，我们来看一下**纯JavaScript**...
web页局部打印
weixin_30478619的博客
08-04 207
<script language="javascript"> <!-- function PrintNote() { var PrintWin=window.open('about:blank','Print'); PrintWin.document.write('<object id="WebBrowser" width=0 height=0 classid="...
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
最新发布
向宇
03-21 2520
在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，< div > 内容1 < div > 内容2 < div > 内容3 < div id = " toPrint " style = " color : red " > 打印内容 < button onclick = " print() " > doPrint
WEB局部打印案例
rdhj5566的专栏
03-02 194
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;局部打印案例&lt;/title&gt; &lt;script type="text
web项目局部打印
weixin_34321753的博客
03-04 159
window.print()方法是打印整个body，若想打印局部区域，网上出现了各种解决办法，我觉得都挺好的。我最推荐jquery.PrintArea.js插件形式 点击上述链接首先下载下来，我的是版本2.4.0 将jquery.PrintArea.js引入到项目中，需要打印的页面引用该js和jQuery.js 打印关键代码如下： $("#目标区域id").printArea(); ...
网页局部打印
u013751625的博客
06-12 258
要打印部分内容，需要隐藏其他内容，可以用媒体查询 我们可以隐藏网页的header footer slider三部分，只打印content @media print { .footer { display: none; } .header { display: none; } .slider { display: none; } .content { margin-left: -(slider的宽度); } } ...
javascript 局部页面打印实现代码
10-29
Web打印有很多方式，水晶报表使用的恐怕比较多，但这东西是收费软件，老板说不能用:(。
js控制web打印(局部打印)方法整理
12-10
另外几种js局部打印的方法： 移花接木： 打印的时候，把需要打印的内容替换成整个body内容（用户会在打印的时候看到变化，客户体验不太好） 代码如下: function preview(oper) ……{ if (oper < 10)……{ bdhtml...
js打印WEB页面内容代码大全
10-08
包含了使用js打印网页的多种方式（比如用js实现网页局部打印等等）
angular实现页面打印局部功能的思考与方法
08-27
本文将为大家介绍 Angular 实现页面打印局部功能的思考与方法，包括在 Angular 中如何实现页面打印局部功能、如何使用缓存传递数据、如何路由跳转到打印页面、如何在打印页面中自动处理分页显示问题等。 Angular ...
页面局部打印
Draling的专栏
04-20 968
今天遇到页面局部打印，经过一番努力，终于成了，分享一下。 protected void Page_Load(object sender, EventArgs e) { //绑定数据 this.GridView1.DataSource = 数据源; GridView1.DataBind();
[Web]网页中实现局部打印功能
qghboy.Net专栏
11-01 965
 script type="text/javascript"   language="javascript">         function   printdiv()         {             var   newstr   =   document.all("printpage").innerHTML;             var   oldstr   =   d
WEB局部打印
me noob
01-12 316
在最近的项目开发中，涉及到了WEB页面的局部打印。 打印 需打印类容！！！！！     function printWord(){ var config = window.confirm("您确定要打印此文件吗？"); if(config == true
web页面打印或部分页面打印
weixin_30835933的博客
07-19 241
参考链接：https://blog.csdn.net/sunmoonjp/article/details/62043041 此篇介绍了选择性打印的方法，及去掉页眉页脚的方法 ：https://blog.csdn.net/u014267869/article/details/52539341 此篇介绍了选择性打印的另一种方法。 核心的代码： w...
如何打印局部页面
HD_2020176257的博客
12-01 243
在华丹快速开发平台开发项目过程中，经常会有需要打印页面的情况，常规的打印方案，web报表平台使用第三方插件或者控件 Activex 控件，虽然打印很完美，能够完美的支持各种纸张，但是却只能打印整个报表， 不能进行局部打印，所以需要进行局部打印，下面说一下开发过程中用到的两种局部打印方式，下面代码是测试使用代码： 下面代码是html页面代码 <!DOCTYPE html> <html> <head> <title> window.print()打印d
web端实现网页局部打印的实现
乖乖康少
11-02 853
代码如下： &lt;div id="printArea"&gt; &lt;div&gt;......文本打印区域......&lt;/div&gt; &lt;div&gt;......文本打印区域......&lt;/div&gt; &lt;div&gt;......文本打印区域......&lt;/div&gt; &
打印Web页面局部内容的两种常用方法
u011289446的专栏
11-28 1014
在Web前端开发中，常有仅需要打印页面局部内容的要求。总的来说，有两种方法可以实现此目标： 一、使用css方式 示例代码： &lt;style type="text/css"&gt; .selector1 { ... } .selector2 { ... } .selector3 { ... } /* 为打印定义 */ @media print { .selector1...
如何实现web 页面打印
05-18
Web 页面打印可以通过浏览器的打印功能实现。一般情况下，用户可以在浏览器中按下 Ctrl+P（Windows）或 Command+P（Mac）打开打印对话框。在打印对话框中，用户可以选择打印机、页面方向、纸张大小和页面范围等设置，最后点击“打印”按钮即可。 如果需要在网页中添加打印按钮，可以使用 JavaScript 实现。具体步骤如下： 1. 在 HTML 中添加打印按钮，如下所示： ``` <button onclick="printPage()">打印</button> ``` 2. 在 JavaScript 中定义打印函数，如下所示： ``` function printPage() { window.print(); } ``` 3. 用户点击打印按钮时，调用 printPage() 函数，触发浏览器的打印功能。 在实现 Web 页面打印时，需要注意以下几点： 1. 确保页面样式和布局在打印时与预期一致。 2. 根据页面内容的不同，可能需要对打印设置进行不同的调整，例如设置横向打印或纵向打印、选择合适的纸张大小等。 3. 对于需要打印的页面内容，应当避免使用绝对定位、浮动等 CSS 属性，以确保打印效果正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值