打印window.print()问题整理

最新推荐文章于 2025-04-23 14:09:11 发布
最新推荐文章于 2025-04-23 14:09:11 发布
阅读量3.3k 收藏
点赞数
分类专栏： web js 打印 文章标签： web js 打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42979149/article/details/85053831
版权

分页时上一页末尾留了很大一片空白

  • 原因： 可能是块级元素没有设置宽度，然后用了定位或浮动就会把窗口撑开
  • 解决： 设置宽度

分页时文本覆盖了thead和tfoot

  • 原因： p标签分页时不会在标签内部分页
  • 解决： 将p标签换成div

分页时thead重复，和tbody内容重叠

  • 原因： 暂不清楚
  • 解决： 设置thead的display: table-row-group
记录调用window.print时因处理页眉页脚问题导致自动分页后打印不全的解决方法
姜雪辞的博客
07-14 3865
写在前面 这几天朋友项目中还在使用window.print，结果问题它又来了。我写了个demo模拟遇到问题的场景，先看效果： 看过我前一篇关于print的文章的小伙伴都很熟悉这个界面吧，上次截的时候就有这个页眉页脚了，但上次他没有提这个地方。这次发现问题了，就来解决一下。 言归正传，那想去掉这个其实很简单，只要在浏览器设置中把页眉页脚勾掉就可以了： 但还是那句话，你可能给每一个用这个项目的客户说，你要在打印之前去浏览器设置里把页眉页脚勾掉吗？ 显然是不可能的。所以像上次的背景水印一样，我们还
聊一聊浏览器打印 - window.print
郊眠寺
11-09 1万+
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从 code 层面带领大家熟悉「打印」的使用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
window.print ()
weixin_34121282的博客
09-23 174
语法： window . print () 参数： 无 返回值： 无 说明： 打印当前窗口内的文档。 调用此方法等同于从 Microsoft® Internet Explorer 文件菜单内选择「打印」。此方法将激活系统打印对话框供用户选择打印设置。 当用户点击「确定」时，将依次发生下列事件： onbeforeprint 事件被触发。 文档被打印。 onafterprint 事件被触发。 当 ...
window.print() 前端实现网页打印详解
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
04-23 308
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。
web打印不清晰
qq_41395531的博客
01-20 4216
web打印不清晰 原因 通过浏览器提供的 window.print() 调用打印小票机，打印出来的字体不清晰。造成问题原因如下 1.字体不对建议font-family: STSong-Light; 、font-family: STHeiti; 或 font-family: FangSong_GB2312 ;这三个亲测有效； 2.字体颜色，某些框架会改变整体的字体颜色不再是穿黑色所以也会导致打印不清晰，我们只需在行内添加 color :black ; 就可以； ...
window.print 页面打印
别在熬夜了！
03-23 1434
打印测完 #oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;} aaa bbb ccc
window.print()打印页面 宽度为1000
qq_38935512的博客
02-28 3492
使用window.print()得时候 如果Body 没设置宽度 或者为100%得时候 打印页面得宽度 为700~800 多了会被裁掉！ 当设置body宽度后 以我这边为例 body 1200px 的时候 主体要打印得元素 给 1000px 结果就能打印 1000宽度得内容了（如果再大于1000px，我试过，会被裁掉！） 效果如下： ...
window.print实现分页打印功能
LZW891967934的专栏
02-12 6717
1.  在要分页的那一条数据所属的 DOM 元素上增加样式：page-break-after: always 或 page-break-before: always，一个在这条数据前分页，一个在这条数据后分页。        2. //打印方法 function preview() {    bdhtml = window.document.body.innerHTML;    sprns
解决前端跨域方法
ln的博客
09-16 887
前言 为了保证用户信息的安全，防止恶意的网站窃取数据，浏览器制定了同源政策。同源指的是：域名相同、协议相同、端口相同。同源策略一定能够程度上保证了安全，有时候却造成了不方便，由此前端跨域问题就出现了。我们需要跨域获取数据和进行通信。 当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 跨域的方法 document.domai
js控制web打印(局部打印)方法整理
12-10
调用 `window.print()` 可以启动浏览器的打印对话框，让用户选择打印当前页面或设置打印选项。 3. "移花接木" 方法： 这种方法通过临时替换页面内容来实现局部打印。在用户点击打印按钮时，将需要打印的内容替换...
JavaScript（六）（浏览器模型/window对象/iframe）
qq_43456781的博客
07-27 2233
JavaScript（六）（浏览器模型/window对象） 文章目录JavaScript（六）（浏览器模型/window对象）八、浏览器模型54. 浏览器环境概述54.1 代码嵌入网页的方法54.1.1 script 元素嵌入代码54.1.2 script 元素加载外部脚本54.1.3 事件属性54.1.4 URL 协议54.2 script 元素==54.2.1 网页工作原理==54.2.2 defer 属性54.2.3 async 属性54.2.4 脚本的动态加载54.3 浏览器的组成54.3.1 渲染
window.print分页打印
04-19
NULL 博文链接：https://ctrain.iteye.com/blog/1864992
window.print()，打印，打印有相同的的顶部栏和底部栏
m0_60120673的博客
11-01 470
前端window.print()打印
window.print()手动设置纸张的宽高
前端菜鸡的博客
10-22 9198
使用window.print();导出页面的时候，默认使用的纸张为A4纸，比例为4:3，如何横屏显示的话，就会出现播放的时候两边留白的情况，显示效果比较一般。 效果如下： 目前计算机的比例一般都是16:9，可以使用@page 手动修改纸张宽高 @page{ size: 1920px 1080px; } 如果需要修改打印时页面元素的大小的话，需要使用@media print @media print { } ...
通过window.print() 打印页面 及 遇到的坑
koumeiyuu
06-30 7623
在IE11下 通过打印页面时候发现 bootstrap.Css文件会影响到window.print()的css样式,发生冲突 ， 解决方法：[这是在下的现在的看法，可能对于前段理解还不够，还未找到更好的方法] 1.style里覆盖bootstrap.css 里关于 print的代码 2.不用bootstrap 我是通过iframe来创建，自定义了样式 通过css，直接通过<style>或者 标签上 都可以 要背景色等样式需要设置一下页面的浏览器。 <di...
window.print();打印案例
weixin_43942765的博客
11-02 879
小编最近遇到了一个打印的功能，该功能是用window.print();做的，废话不多说，来简单看看吧！ 代码： 效果： 点击打印： 源代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text...
前端 window.print() 打印方案、优化策略总结
weixin_t1452030的博客
04-16 4012
网页打印的功能在一些 ims 系统中已经很常见，上面这几个优化方案都是最近遇到后临时研究后的成果，已经满足我们的项目需求，可能还有不足之处，仅可供参考。
page-break-after:always；解决window.print打印断页问题——已解决
热门推荐
yehaocheng520的博客
07-13 1万+
今天用户提出一个关于window.print()打印的问题： 如下图所示：在打印断页的部分，会出现数据打印不全的情况。打印预览与实际打印的情况还有有所区别。 注意一点：如果想要实现window.print()打印当前的页面，则想要保证打印页面的body的height必须为auto，否则只会打印第一页。还要注意一下权重问题。 @media print{ body { height: auto !important; } } html部分，之前用的是table，后面由于断页打印不全
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值