原生js打印 样式注意

打印函数

window.print();

直接调这个函数打印了一个react框架构建的页面，发现背景颜色丢失，以及有页眉页脚。

首先是要添加 css 不让浏览器渲染对盒子颜色产生影响。

    /*webkit 为Google Chrome、Safari等浏览器内核 */
   -webkit-print-color-adjust: exact;
   /* 火狐，Safari */
    print-color-adjust: exact;
    color-adjust: exact; 

可以添加到根元素或者所有元素上。

*{
   /*webkit 为Google Chrome、Safari等浏览器内核 */
   -webkit-print-color-adjust: exact;
   /* 火狐，Safari */
    print-color-adjust: exact;
    color-adjust: exact; 
}

最后去除页眉页脚，直接添加到css里面就行

@page{
    size:auto;
    margin:0mm;
}