window.print()打印表格时@media print隔行样式不生效求助

问题核心是浏览器默认会禁用打印背景色，同时可能存在选择器匹配或优先级不足的问题，以下是具体解决步骤：

1. 强制浏览器打印背景色 #

在@media print的样式中添加-webkit-print-color-adjust: exact和print-color-adjust: exact属性，这两个属性可以强制浏览器忽略默认的背景打印限制，确保背景色被输出。

2. 优化选择器与优先级 #

• 如果不确定打印的表格是否带有.table-striped类，直接使用table tr:nth-child(even)作为选择器更通用，避免类名缺失导致样式不生效；
• 给background-color添加!important提升优先级，覆盖可能存在的其他冲突样式。

修改后的代码片段 #

将原代码中@media print内的隔行变色样式替换后，完整的generatePDF函数如下：

function generatePDF() {
    var contentToPrint;
    var example2 = document.getElementById('example2');
    var select_date = document.querySelector('#daterange-btn span');
    var date = select_date.textContent;

    if (example2.style.display === 'none') {
        contentToPrint = document.getElementById('example1').innerHTML;
    } else {
        contentToPrint = example2.innerHTML;
    }
    var printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>Print</title>');
    printWindow.document.write('<style>');
    printWindow.document.write('@media print {');
    printWindow.document.write('.no-print { display: none; }');
    printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
    printWindow.document.write('th, td { border: none; padding: 8px; }'); 
    printWindow.document.write('th { display: none; }'); // Hide table header
    // 修改后的隔行变色样式
    printWindow.document.write('table tr:nth-child(even) { background-color: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }'); 
    printWindow.document.write('a { text-decoration: none; color: inherit; }');
    printWindow.document.write('}');
    printWindow.document.write('</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write('<h2>Bagged Items Report</h2>'); 
    printWindow.document.write('<p>'+date+'</p>');
    printWindow.document.write('<h4 style="border-bottom:2px solid black;">Search Results</h4>');
    printWindow.document.write(contentToPrint);
    printWindow.document.write('</body></html>');

    printWindow.document.close();
    printWindow.print();
}

额外提示 #

如果用户端浏览器仍未生效，需要开启打印时的背景图形选项：

• Chrome：打印预览→更多设置→勾选"背景图形"
• Firefox：打印预览→页面设置→勾选"打印背景"

内容的提问来源于stack exchange，提问作者Guru1804