Javascript window.print() 设置打印样式和内容

最新推荐文章于 2024-03-11 16:29:03 发布
最新推荐文章于 2024-03-11 16:29:03 发布
阅读量2.8w 收藏 8
点赞数 2
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leinchu/article/details/56479681
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.printonly{
	display:none
}
@media print{
	input,.noprint{
		display:none
	}
	.printonly{
		display:block;
		width:50%
	}
}
/**
.printonly{
	display:none
}
不能写到这里，会导致打印时printonly的内容也不显示
*/
</style>

<body>
<div class="noprint">
	这段打印时不显示
</div>
<div class="printonly">
    <h1>这段打印时会显示</h1>
    <hr>
    This is print-only
</div>
<input onClick="print()" value="点击打印" type="button">
</body>
</html>

leinchu
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
javascript实现window.print()去除页眉页脚
10-24
主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能
10-23
html和js通过window.print()实现调用浏览器打印带背景图片和生成二维码的文件功能;直接下载可用
Vue window.print() 自定义页眉，页脚内容(可放图片)
最新发布
qq_57477371的博客
03-11 514
今天在工作中，遇到一个问题，产品经理要求每一页打印的内容都要有固定的页眉(要可放图)我这里用了两个thead ，通过设置border / position 达到效果。使用表格的 thead 标签。
print.js样式调整
qq_34979689的博客
09-11 558
targetStyles: '*', 继承打印的对象的样式。style: 自定义样式。
使用print.js修改打印部分样式的使用
Fatfish_tree的博客
10-30 474
世上本没有路，走的人多了，便有了路 ---- 鲁迅</p><button onclick="printSomething()">打印</button>style: style,// 亦可使用引入的外部css;<p>世上本没有路，走的人多了，便有了路 ---- 鲁迅</p><p>世上本没有路，走的人多了，便有了路 ---- 鲁迅
Print.js实现打印pdf，HTML，图片(可设置样式可分页)
Ghmin的博客
12-28 1万+
Print.js四种打印类型：'pdf'、'html'、'image'、'json'一文搞懂
JS 前端打印功能--原生写法（分页处理、样式调整、隐藏打印滚动条）
词不达意难知的博客
05-29 1214
JS 前端打印功能--原生写法
聊一聊浏览器打印 - window.print
郊眠寺
11-09 1万+
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从 code 层面带领大家熟悉「打印」的使用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
关于页面打印window.print()的样式问题
weixin_34049032的博客
04-24 3213
当我们打印网页的时候。有时候会发现。打印出来的。跟网页上看到的样式的差别有点大。这其中可能有的问题是。样式问题。 当调用打印(window.print())方法时。打印机会在网页的样式中查找 @media print{}的样式，并适应到要打印的网页中。 所以 如果要打印的页面符合看到的页面效果，最好在写套 样式 <style type="text/css"> /*...
window.print()打印带有样式的部分页面
软宝宝的博客
06-20 2606
window.print()打印带有样式的部分页面 最近做个新任务，第一次接触了解前端打印页面这一块，如果单纯打印页面内容是很简单的，直接在某个页面调用window.print()就OK了，如果需要打印页面某部分，如果不了解打印的童鞋就有点棘手，不知道如何下手，还好有领导的建议给了我两个网址慢慢研究将系统打印页面模块优化一下 https://stackoverflow.com/questions/1545849/possible-to-force-printer-setup-paper-size-in-ja
使用js进行页面打印window.print(),并实现页面的调整
兮赫的博客
02-22 2578
精选30+云产品，助力企业轻松上云！>>> 打印wi...
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS怎么实现页面打印呢？JavaScript 实现打印,打印...
javascript window.opener的用法分析
10-29
window.opener 返回的是创建当前窗口的那个窗口的引用
vue使用printjs实现列表打印功能
GIAAKK的博客
09-21 863
前端表格的打印
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
热门推荐
qq_42571665的博客
10-12 1万+
实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。
js几种打印方法的几种方法
一步一个脚印，踏实努力，向着目标前进
07-19 1万+
根据您的具体需求和使用环境，您可以选择适合您的方法来实现打印功能。希望这些信息对您有所帮助。替换为要打印的元素的实际 ID。您可以打印整个页面，也可以指定要打印的特定元素。在上面的示例中，当用户点击"Print"按钮时，将触发打印操作，打印。在您的 HTML 文件中创建一个按钮，用于触发打印操作。库的 JavaScript 文件和 CSS 文件。希望这些详细的步骤能够帮助您实现打印功能。首先，在您的 HTML 文件中引入。正常工作，您需要确保您的网页在加载。希望这个详细的教程能够帮助您使用。
JS网页打印设置技巧(
weixin_34101229的博客
07-09 172
最近写一些东西需要提供网页打印功能，所以归纳总结了一下，本节主要讲述使用IE6支持打印功能，不同浏览器安全设置与支持有差异，如果不支持，请使用您的浏览器自带打印功能(或手动设置启用ActiveX控件)。书写有不足或描述不清的地方请大家指正。^-^利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。［分析］...
添加打印样式的三种方式
Max_Law的博客
03-17 1113
在使用时常常会发现打印的样式十分混乱，首先是因为打印机采用的是 mm 单位，而不是我们页面常用的 px，同时有些样式在打印时也不会生效。所以一般我们都需要为打印样式重新进行设计，一般我们有三种方法添加打印专用样式文件。
print打印页生成及排版样式更改的技巧
weixin_34255055的博客
09-07 696
<script>function myPrint(obj){ //注：可以在打印页生成前前通过js更改样式，来实现排版，打印页生成后通过setTimeout延迟将页面样式变回去 //打开一个新窗口newWindow var newWindow=window.open("打印窗口","_blank",'height=300,widht=400'); //要打印的div的...
window.print() 打印指定内容
06-09
如果需要打印页面中的指定内容，可以使用 HTML 的打印样式表（@media print）。这样可以在打印时隐藏不需要打印的内容，并且格式化需要打印的内容。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Print Example</title> <style> @media print { .no-print { display: none; } } </style> </head> <body> <h1 class="no-print">Print Example</h1> <p class="no-print">This is an example of printing an HTML page using JavaScript.</p> <div id="print-content"> <p>This is the content to be printed.</p> </div> <button class="no-print" onclick="printContent()">Print</button> <script> function printContent() { var content = document.getElementById("print-content").innerHTML; var printWindow = window.open('', '', 'height=400,width=800'); printWindow.document.write('<html><head><title>Print Content</title></head><body>'); printWindow.document.write(content); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); } </script> </body> </html> ``` 在上面的示例中，我们在 HTML 中定义了一个样式表（@media print），用于在打印时隐藏指定的元素（在本例中是标题和说明）。然后我们在页面中定义了一个需要打印的内容（在本例中是一个 div 元素），并且给这个 div 元素添加了一个 id（print-content）。接着我们定义了一个打印按钮，并且给按钮添加一个 onclick 事件，该事件会调用 printContent() 函数。 在 printContent() 函数中，首先获取需要打印的内容（即 print-content 元素的 innerHTML），然后创建一个新的浏览器窗口（使用 window.open() 方法）。接着我们在新窗口中写入需要打印的内容，并且调用 print() 方法进行打印。 需要注意的是，在新窗口中写入 HTML 代码时，需要在 head 标签中添加 title 标签，否则在某些浏览器中可能无法正常打印。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值