ui-grid v3.2.9打印问题求助：如何实现全内容打印而非仅可见区域？

我来帮你搞定这个打印只出可见区域的问题～核心原因是ui-grid默认的样式给容器加了固定高度和overflow: auto，导致新窗口里的表格内容被滚动条截断，打印时只能捕获可见部分。下面是针对性的改进方案：

问题根源拆解 #

ui-grid的.ui-grid、.ui-grid-viewport等容器默认设置了固定高度和滚动属性，当数据量过大时，超出部分会被隐藏。直接复制HTML到新窗口时，这些样式会被继承，导致打印内容不全。

改进后的代码实现 #

function print(id){
  var printGrid = document.getElementById(id);
  var printWindow = window.open("", "_blank");
  
  // 复制原页面头部样式，同时添加打印专用的覆盖样式
  var headContent = document.getElementsByTagName('head')[0].outerHTML;
  var printSpecificStyles = `
    <style>
      /* 强制ui-grid容器自适应高度，移除滚动限制 */
      .ui-grid, .ui-grid-viewport, .ui-grid-canvas {
        height: auto !important;
        overflow: visible !important;
      }
      /* 隐藏分页栏（如果你的网格有分页，打印全部数据） */
      .ui-grid-pager-panel {
        display: none !important;
      }
      /* 打印时的页面优化 */
      @media print {
        body {
          margin: 0;
          padding: 1rem;
        }
        /* 避免表格行被分页截断 */
        .ui-grid-row {
          page-break-inside: avoid;
        }
      }
    </style>
  `;
  
  // 组装完整的HTML内容
  var htmlContent = `
    <html>
      <head>${headContent}${printSpecificStyles}</head>
      <body>${printGrid.outerHTML}</body>
    </html>
  `;
  
  printWindow.document.write(htmlContent);
  printWindow.document.close();
  
  // 用requestAnimationFrame替代固定延时，确保内容完全渲染后再打印
  printWindow.requestAnimationFrame(function() {
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  });
}

关键改动说明 #

• 强制自适应高度：通过!important覆盖ui-grid默认的固定高度和滚动样式，让所有表格行都展开显示，不会被滚动条隐藏。
• 打印样式优化：添加@media print规则，调整页面边距，避免表格行被分页截断，提升打印排版效果。
• 更可靠的渲染时机：用requestAnimationFrame替代固定的1000ms延时，能精准等待新窗口的内容和样式完全渲染完成，避免因渲染速度慢导致的打印不全。
• 隐藏分页栏：如果你的网格启用了分页，这一步会自动隐藏分页控件，打印全部数据而非当前页内容。

额外注意事项 #

如果你的网格使用了固定列（frozen columns），可能需要额外调整样式，比如让固定列和普通列合并为一个完整的表格，避免打印时出现重叠或错位。可以添加如下样式：

.ui-grid-frozen-row, .ui-grid-frozen-column {
  position: relative !important;
}

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