Microsoft Edge中CSS @media print打印样式不生效问题求助

问题背景 #

通过window.open创建打印窗口，给目标元素添加@media print下的transform: scale(0.65)样式，在Chrome中正常生效，但Edge中打印预览始终保持默认尺寸——即便DevTools模拟打印时样式有效，尝试!important、zoom、页面边距调整等操作均无效。

有效解决方案 #

方案1：确保新窗口样式加载完成后再打印

Edge中打印触发时机过早会导致样式未完全应用，需等待新窗口DOM加载完成后再执行打印操作，同时完善HTML结构确保样式内嵌生效：

var mywindow = window.open('', 'PRINT', 'height=650,width=1000');
// 写入完整HTML结构，内嵌打印样式
mywindow.document.write(`
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        @media print {
            .toPrintData {
                transform: scale(0.65);
                transform-origin: top left; /* 固定缩放原点，避免偏移 */
                width: 153.8%; /* 反向计算宽度，抵消缩放导致的尺寸缩小 */
            }
        }
    </style>
</head>
<body>
    ${toPrintData}
</body>
</html>
`);
mywindow.document.close();
// 等待页面加载完成后触发打印
mywindow.onload = function() {
    mywindow.focus();
    mywindow.print();
    mywindow.close();
};

方案2：改用Edge兼容的zoom属性

Edge对zoom属性的打印支持比transform更稳定，替换缩放方式：

@media print {
    .toPrintData {
        zoom: 0.65;
        width: 100%;
    }
    /* 配合调整页面边距，确保内容适配 */
    @page {
        size: auto;
        margin: 0;
    }
    body {
        margin: 0;
    }
}

方案3：放弃新窗口，直接在原页面打印

隐藏页面其他元素，仅保留打印目标，避免新窗口的样式兼容问题：

@media print {
    /* 隐藏所有非打印元素 */
    body * {
        visibility: hidden;
    }
    /* 显示打印目标及其子元素 */
    .toPrintData, .toPrintData * {
        visibility: visible;
    }
    /* 固定打印元素位置并缩放 */
    .toPrintData {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(0.65);
        transform-origin: top left;
    }
}

对应的打印触发代码：

window.focus();
window.print();

问题原因说明 #

Edge打印预览在处理通过window.open创建的新窗口时，存在样式应用时序问题：打印操作触发时，新窗口的样式可能还未完成解析应用。另外，Edge对transform在打印场景下的优先级处理和Chrome不同，改用zoom或等待DOM加载完成能规避该问题。

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