Chrome浏览器表头打印相关

24 篇文章 0 订阅
  • 表头打印重叠:
    需要每页都有相同的表头,使用table的thead就可以实现,但是有时候会出现表头内容和正文在顶部重叠,也不知道是什么原因,原来是打印的table外面又包裹了一个div,且设置了宽度为A4纸大小210mm,把这个宽度属性去掉后就正常了。

  • 多一条边框:
    当table、tr、td都设置了边框,有时候跨页的时候上一页的底部可能会多一条边框,把table的border去掉就正常了。

  • 另外就是table除了加下面这两个样式外,不要加其它的样式或类名,防止UI框架加了一些属性影响打印效果,亲身经历使用了bootstrap一些类名后怎么设置边框都没有效果的遭遇。

  • 有时会有左侧或右侧的线要稍微细一些,打印出来很淡,通过把tr也加上border后就正常了,如果表头的tr不需要显示边框,需要设置其边框颜色为#fff或透明色,设置border:none的话还是可能出现一侧边框细的问题。

  • 内容不够1页,预览却有2张纸,多了一张空白页,原来是自己 设置了html,body{height:100%} 的原因,去掉就解决了。


table{
	border-spacing: 0;
	border-collapse: collapse;
}
	
  • 设置打印方向,只需加入下面这句(会有浏览器兼容问题,Chrome还是没问题的):

/* 强制设置为横向打印,浏览器选择方向的选项会消失*/
@page { size: A4 landscape; }

如果设置了body的min-width属性,那么整个打印页面的最小宽度也是那个值,很可能会有异常。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值