IE11打印ExtJs 4.2面板仅最后一页正常其余空白问题求助

这个IE下的打印坑我之前处理过不少，ExtJS 4.2的组件结合跨窗口打印时，IE的渲染机制很容易掉链子。你遇到的“仅最后一页有内容、其余空白”，核心原因是IE对动态复制的DOM内容，没有足够时间完成布局计算就触发了打印，再加上隐藏div的尺寸计算bug，直接导致前面的页面内容没被渲染出来。下面给你几个针对性的解决方案：

1. 替换隐藏div为“移出可视区域”的容器 #

不要用display: none的隐藏div来渲染面板——IE会忽略这类元素的尺寸计算，复制到新窗口后，组件的布局高度完全错乱。改用绝对定位把容器移出屏幕：

// 创建打印专用容器（提前加到页面里）
var printContainer = document.createElement('div');
printContainer.style.position = 'absolute';
printContainer.style.left = '-9999px';
printContainer.style.top = '-9999px';
printContainer.style.width = '100%'; // 确保和打印页面宽度一致
document.body.appendChild(printContainer);

// 把面板渲染到这个容器里
yourPanel.render(printContainer);

2. 给新窗口引入ExtJS样式文件 #

新窗口默认没有原页面的CSS，ExtJS网格的样式、vbox布局的规则都丢失了，必然导致布局错乱。一定要在新窗口里写入Ext的样式链接：

var newWin = window.open('', '_blank');
// 先写入样式，再写入DOM内容
newWin.document.write('<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">');
newWin.document.write('<div class="x-panel">' + printContainer.innerHTML + '</div>');
newWin.document.close();

3. 延迟打印，给IE足够的渲染时间 #

IE处理动态DOM的速度比Chrome/Firefox慢很多，尤其是包含多个网格的复杂面板。必须用setTimeout延迟触发打印，给浏览器足够时间完成布局计算：

// 延迟500ms打印（可根据实际复杂度调整，300-1000ms都可以）
setTimeout(function() {
    // 强制触发浏览器重排（可选，但IE下很有用）
    newWin.document.body.offsetHeight;
    newWin.print();
    newWin.close();
    // 清理打印容器，避免内存泄漏
    printContainer.innerHTML = '';
}, 500);

4. 优化打印样式，避免内容截断 #

给网格和容器添加打印专用的CSS，防止内容被分页截断：

@media print {
    .x-grid {
        page-break-inside: avoid; /* 避免网格被分页拆分 */
    }
    .x-panel-body {
        overflow: visible !important; /* 取消滚动，让所有内容显示 */
    }
}

调试技巧 #

如果还是有问题，可以先注释掉newWin.close()，打开新窗口后手动检查：

• 看看所有网格是否正常显示，高度是否正确
• 检查控制台有没有样式加载失败的报错
• 手动触发打印，看是否还是只有最后一页有内容——如果手动打印正常，说明延迟时间不够，再调大setTimeout的时间

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