上一篇有讲到如何在浏览器端实现打印功能。后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色。网上的方法主要有以下几种实现方式:

1.把背景颜色写成行内样式,如下图所示:

用 CSS 实现打印显示底色-LMLPHP

但是发现这样子写了,并不行。可能还需要设置其他的,如果有知道的亲,望不吝赐教~

2.在打印的时候用户自己设置,如下图:

用 CSS 实现打印显示底色-LMLPHP

该方法虽然奏效,但是出于用户体验的角度考虑,不太现实。

3.直接用CSS 控制,此法有效,简单~直接上代码:

@media print {
.receipt-print .table th {
background-color: #f1f4f7 !important;
-webkit-print-color-adjust: exact;
}
}

@media print 是针对于打印媒体的。

-webkit-print-color-adjust属性不是个标准属性,具体的含义,使用方法可访问https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

05-02 07:22