页面调用window.print()打印以及隐藏打印按钮

最新推荐文章于 2024-05-16 14:48:54 发布
最新推荐文章于 2024-05-16 14:48:54 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W07028057/article/details/128641910
版权
文章讲述了如何使用JavaScript的window.print()函数来触发网页打印，并通过CSS的@mediaprint规则将特定类名（如.buttonNoPrint）的元素在打印预览中隐藏，以实现打印时不显示打印按钮的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用函数：window.print();

<p><button οnclick="window.print();" class="buttonNoPrint">打印</button></p>

没隐藏回出现打印按钮：

使用css隐藏：

@media print   {  
  .buttonNoPrint  
  {  
  display:   none;  
}
js 进行打印控制 打印时隐藏按钮
07-04
js 进行打印控制 打印时隐藏按钮 js 进行打印控制 打印时隐藏按钮
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
首先，`window.print()` 方法是JavaScript中的一个全局函数，它会触发浏览器的打印对话框，允许用户选择打印当前页面或对其进行自定义设置。在调用此方法后，浏览器会尝试呈现当前窗口的内容，包括文本、图像、表格...
window.print打印页面时，隐藏部分打印按钮
qq_33172029的博客
03-27 3957
1）谷歌可用：（IE8，弹出打印窗体后，但原窗体内容，会变成空白） function applyPrint(){ if(!confirm('确定要打印吗？')){ return; } var headstr ="<html><head><title>招聘员工申请书</title>" + "</hea...
window.print() 打印隐藏内容
孑立
05-10 1200
快来看看吧 快来看看吧 快来看看吧
vue中 window.print() 解决打印和隐藏同时进行的问题
josiecici的博客
09-28 2022
解决办法：setTimeout或者$nextTick 如下图 printPdf() { this.$emit("toClosePrintMap", false); // setTimeout(() => { this.$nextTick(() => { window.print(); this.$emit("toClosePrintMap", true); }); // }, 0); },
window.print()打印功能，隐藏$("#leave_send").click(function () { $('.box_two').css('display', 'none
想成为大神的小白
08-09 678
$("#leave_send").click(function () { $('.box_two').css('display', 'none'); window.print(); $('.box_two').css('display', ''); return false; }) 上边的事件绑定到打印按钮上，然后先把要...
js 打印 隐藏 打印按钮
grous的专栏
08-08 6731
function printPage() { $("#printImg").css("display","none"); window.print(); $("#printImg").css("display",""); return false; }
window.print打印指定div指定网页指定区域的方法
09-04
用户点击打印按钮后，新开一个窗口加载需要打印的内容，然后在新窗口中调用 `window.print()` 并自动关闭窗口。这种方法可以让开发者更好地控制打印输出的样式和内容。 ```html <input name="b_print" type="button...
window.print打印指定div实例代码
09-04
`window.print()` 是JavaScript中的一个方法，它用于打开浏览器的打印对话框，从而让用户选择打印当前网页。但是，这个方法默认会打印整个页面，包括用户可能不希望打印的导航、侧边栏或者其他元素。在这种情况下，...
web打印 window.print()介绍
09-05
`window.print()` 是JavaScript的内置函数，调用这个函数会立即打开浏览器的打印对话框，允许用户选择打印机、设置打印选项（如页面范围、份数等），并执行打印操作。这个函数并不直接控制打印的内容，而是告诉...
WEB应用程序，不预览，直接打印
04-23
NULL 博文链接：https://llyilo.iteye.com/blog/2257811
js window.print实现打印特定控件或内容
10-26
// 调用window.print()进行打印 window.print(); // 还原页面原始内容 document.body.innerHTML = oldstr; return false; } ``` 在这个函数中，`printdiv`接受一个参数`printpage`，即我们想要打印的div的ID...
【实现web打印与打印按钮的监听】
weixin_55862915的博客
07-20 839
实现web打印与监听打印按钮的代码示例，希望可以帮助到你。
2021/04/30 window.print()不想打印页面某些部分
Nighsloth的博客
04-30 1027
背景：比如页面如下，点击打印按钮后，不需要按钮显示在打印页面上 –页面 –打印预览框 – –有两种实现效果。 第一种，页面上‘打印’按钮一直存在 第二种，打印前按钮存在，打印后按钮不显示在页面上 第一种：打印按钮一直在页面上，只是调用点击方法时不显示在打印预览框内 –效果图 –代码 主要是css设置，display: none; //1.在template中 自定义样式noprint <div class="print-footer noprint"> <dm.
window.print 打印的时候显示页码不显示标题和url链接
yiweiIt的博客
11-27 4322
3.页脚的内容要保存 但是页脚内容左侧会展示当前浏览器的地址链接这时候就要配合JS了，以下代码核心就是不要展示地址 于是新开了个页面将浏览器地址栏赋值为空或者‘·’这样打印的时候就不会出现地址栏地址了，但是于此同事页面的样式没有带过去 所以将原页面的style里的内容和引用的link内容页一并带过去 这样就能保证和原有样式是一样的了。最近做了个需求需要做的是在使用浏览器打印的时候要加上页码 比如当前第几页、打印的总页数。/* 在底部居中显示页码 */自然的显示又不影响页面展示的效果 费了我九牛二虎之力。
打印时隐藏按钮及其他信息方法
11-12 308
web打印是困扰很多web开发人员的问题。有很多人提出了不同的web打印解决方案，还有很多的商业报表设计器来帮我们（需要付费的，我想很多人不想花这个钱），本文不会讨论这个问题。如果大家对于web打印各种解决方案感兴趣，可以阅读上文，或者到互联网上搜索。这方面对文章很多。 本文将提供给大家一个在普通ie打印的情况下，如何在打印的报表中省略掉我们不希望看到的东西，保留想要看到的东西，而对于用户来...
printjs 如何打印隐藏html元素
supming1的专栏
05-16 1015
最近遇到一个需求，需要点击按钮的时候打印局部html，经调研printjs 是实现打印很不错的库，不过这里遇到一个问题，要打印的东西并没有显示在页面上，产品也并不想去做多一个弹窗或页面去承载。这里尝试了先用display:none隐藏,再用@media print 设置display:block。也尝试用了printjs 的一些style相关的参数，也没效果（这里没深入去看这些参数到底为什么没效果）。2、（推荐）采用了一个取巧的方法，在需要打印的元素外围包裹一个height:0;
网页打印javascript:window.print()
没有你的城市
06-03 2067
在做B/S项目开发时。难免会遇到网页打印问题！ 可以用css控制， @media print .a {display:block} .b {display:hidden} 好像是这样。把你不想打印的部分class设为b 首先在网页中添加： VIEWASTEXT> 然后就可以依次加入功能按钮了：   将这两块东西放到就不会打印这些按钮了。当然要定义no
window.print()实现打印页面部分以及js判断打印成功
热门推荐
未来以来 futureToday
03-19 1万+
window.print() 实现页面部分打印 需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送去打印，打印后又处理回来。 function window.onbeforeprint() { //将一些不需要打印的隐藏 } function window.onafterprint() { //放开隐藏的...
window.print 怎么调用打印后汉书
最新发布
10-16
`window.print()` 是 JavaScript 中的一个内置函数，用于直接触发浏览器的默认打印功能，无需用户手动点击“打印”按钮。要通过 `window.print()` 调用并打印《汉书》，你需要将《汉书》的内容封装在一个可打印的元素中，比如 `<div>` 或者 `<iframe>`。然后你可以编写如下的 JavaScript 代码： ```javascript // 假设你有一个包含《汉书》内容的 HTML 结构 const bookContent = document.getElementById('your-book-content'); // 替换为实际的元素ID // 如果是纯文本 bookContent.innerText // 如果是内联样式文本，可以直接打印 // 如果是嵌套的DOM结构 bookContent.innerHTML // 打印 window.print(bookContent); ``` 如果你的《汉书》内容是从服务器动态加载或者是一个长文档，需要先将其转换成可打印的HTML格式。 注意，`window.print()` 对于从非页面元素（例如 PDF、图片等）直接打印可能会有限制，因为浏览器的安全策略。确保你的内容适合网页环境，并且在适当的情况下使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值