关于 Window.print() 实现浏览器打印功能

使用语法

window.print();

使用 @media 媒体查询

// 利用 print 设置打印页面的样式，利用 page 设置打印文档的纸张配置
 /* css/print.css */
 
@media print {
    * {
        /* 保证打印出来颜色与页面一致 */
        -webkit-print-color-adjust: exact !important; 
    }
    .no-break {
        /* 避免元素被剪切 */
        page-break-inside: avoid; 
    }
    .no-print {
        /* 不想打印的元素设置隐藏 */
        display: none; 
    }
    
    @page {
        /* 设置打印纸张尺寸及打印方向：A4，纵向打印 */
        size: A4 prtrait; 
        /* 利用 margin 设置页边距 */
        margin-top: 3cm 
    }
}