Chrome浏览器表头打印相关

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

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

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

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


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

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

猜你喜欢

转载自blog.csdn.net/bluelotos893/article/details/84228218