打印功能window.print()

已于 2022-01-21 14:47:43 修改
阅读量5.5k 收藏 6
点赞数 2
分类专栏： 前端常用方法 文章标签： 前端打印print
于 2022-01-05 10:58:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GTbond/article/details/122318624
版权
本文探讨了如何使用JavaScript的`window.print()`方法进行网页打印，并指出打印时整个网页会被捕获。同时，文章强调在CSS中使用`@media print`来针对打印做样式调整，避免LESS/SASS等预处理器在打印时不生效的问题。通过设置打印样式，可以解决背景色可能不显示但字体颜色生效的状况，确保打印样式独立于页面显示样式，便于定制和维护。
摘要由CSDN通过智能技术生成

打印功能window.print()

1. window.print()打印其实打印的是整个当前网页
2.

在这里插入图片描述

3. 样式问题

如果使用less,scss 是不会生效的
只能使用css语言格式, 就是不能像less、scss嵌套写

//在style中，使用@media print{}
//不要嵌套写
@media print {
	div{
		font-size:12px;
		···
	}
	···
}

背景颜色可能不会生效，字体颜色生效了

也可以不用@media，直接用css语言格式，也能生效，就是相当于打印时和也用这一套样式；但是如果打印时，不想显示打印内容中的某部分，或者改个样式，都比较麻烦；打印时单独用一套样式，就可以方便修改，使用@media print{}不会影响平时展示

GG·bond
关注
专栏目录
window.print().txt
11-06
window.print().txt
window.print()
weixin_33895475的博客
05-21 136
调用window.print()时，可以利用css来控制页面中的东西是否显示 <style> @media print{ 　　.noprint{ 　　display:none 　　} } </style> HTML如下： <table width="757" height="174" border="0" align="center"c...
web端静默打印
最新发布
qq_53218378的博客
10-17 260
在物流、仓储等项目中常有使用打印面单的操作，但是浏览器自身widow+p的打印会弹出一个框但是往往在实际业务中需要大量打印，所以往往这种方式并不可取（每次打印都弹一次）利用ifram加载pdf文件触发静默打印也是不错的。
window.print ()
weixin_34121282的博客
09-23 142
语法： window . print () 参数： 无 返回值： 无 说明： 打印当前窗口内的文档。 调用此方法等同于从 Microsoft® Internet Explorer 文件菜单内选择「打印」。此方法将激活系统打印对话框供用户选择打印设置。 当用户点击「确定」时，将依次发生下列事件： onbeforeprint 事件被触发。 文档被打印。 onafterprint 事件被触发。 当 ...
web打印 window.print()介绍
09-05
- 不同浏览器可能对 `window.print()` 的支持程度不同，确保在多种浏览器中测试打印功能。 - 考虑到用户体验，打印前最好提供预览功能，让用户确认打印内容。 - 使用CSS媒体查询时，确保在打印样式表中设置适当的...
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
在网页开发中，有时我们...通过这个项目，你可以更直观地了解如何结合`window.print()`、背景图片和二维码生成来实现打印功能。在实际应用中，可能还需要根据具体需求进行调整，比如适应不同屏幕尺寸、优化打印布局等。
window.print打印指定div实例代码
09-04
`window.print()` 是JavaScript中的一个方法，它用于打开浏览器的打印对话框，从而让用户选择打印当前网页。但是，这个方法默认会打印整个页面，包括用户可能不希望打印的导航、侧边栏或者其他元素。在这种情况下，...
window.print打印指定div指定网页指定区域的方法
09-04
`window.print()` 是JavaScript中的一个内置函数，用于打开浏览器的打印对话框，让用户选择打印当前网页。但是，它默认会打印整个网页的所有内容。在本文中，我们将探讨如何利用 `window.print()` 结合其他技术来...
javascript实现window.print()去除页眉页脚
10-24
在JavaScript中，`window.print()`方法是一个非常实用的功能，它允许用户直接从浏览器打印网页内容。然而，默认情况下，打印操作可能会包含页眉和页脚，这些元素可能包含URL、日期或者页码等信息，有时并不符合我们...
打印window.print();
a4228492的博客
04-06 118
<%@ page contentType="text/html;charset=utf-8"%><%@ page language="java" import="java.util.*"%><%@ page language="java" import="com.beyond.framework.common.config.*"%><%@ pag...
window.print() 前端页面打印与预览PDF
小先生编程
08-31 1万+
window.print()打印是浏览器自带的打印，实现原理是将html转换为pdf可以在线预览打印或者导出pdf，在任何网页上可通过Ctil+p快捷键调出浏览器打印程序，它可将整个网页打印出来，在我们开发中，其实并不需要将所有页面打印出来，或者只需要局部的页面做打印，那我我们就自己实现window.print（）打印功能。 浏览器自带的打印窗口（页眉页脚属于自带的，我们无法去掉，但是可以通过css将边距调小，将其覆盖掉） 打印常见的功能与问题处理 打印的功能以及布局全由css控制，在加上一些程序处理的业
window.print
ZOEylchen的博客
06-01 857
vue 打印
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
热门推荐
努力才是唯一的入场券。
06-10 1万+
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
window.print()实现打印功能
hunantai的博客
08-07 404
想要去掉滚动条，尝试缩放页面比例，使用vue-print-nb都不行，直到最后将vxe-table换成了原生table，奇迹般的好了！使用window,print实现打印功能，页面中使用了vxe-table表格，所以打印出来的表格中带有横向滚动条。
一文弄懂window.print（）打印
学习 记录 总结 分享
04-04 1万+
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。
window.print()使用
weixin_44705688的博客
08-15 1883
window.print()的简单使用 打印想要的dom元素：如我只想打印下面的表格 printBtn() { let printHtml = this.$refs.printFrom.innerHTML //获取要打印的dom内容 let bodyHtml = document.body.innerHTML //获取整个页面内容 document.bod...
window.print 怎么调用打印后汉书
10-16
`window.print()` 是 JavaScript 中的一个内置函数，用于直接触发浏览器的默认打印功能，无需用户手动点击“打印”按钮。要通过 `window.print()` 调用并打印《汉书》，你需要将《汉书》的内容封装在一个可打印的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值