HTML打印时超宽表格列超出页面宽度自动换页打印的实现问题

一、先修正现有CSS的问题 #

你现有CSS存在列宽冲突问题：.column:nth-child(odd)设15%、.column:nth-child(even)设75%，仅2列总宽度就达90%，列数超过2后总宽度必然超出页面宽度，这是列被截断的核心诱因之一，先尝试打印环境下的CSS适配：

@media print {
  /* 打印全局配置 */
  @page {
    size: A4 landscape; /* 优先用横向打印增加可容纳列数，也可改为portrait保持纵向 */
    margin: 1cm;
  }
  .div-table {
    table-layout: auto !important; /* 打印时改为自动适配列宽 */
    width: max-content !important; /* 让表格宽度随内容自然撑开 */
    break-inside: auto;
  }
  .column {
    min-width: 80px; /* 给列设置最小宽度保证可读性，可根据实际内容调整 */
    width: auto !important; /* 覆盖原有固定比例宽度冲突 */
  }
  /* 简单列分页规则（兼容性一般，仅作为备选） */
  .column:nth-child(10n) { /* 每10列后强制分页，可根据单页实际容纳量调整数值 */
    break-after: page;
  }
}

如果CSS方案无法满足「先打完所有列组再打下一组行」的需求，推荐使用更可控的JS预处理方案。

二、JS预处理实现自定义分页逻辑 #

该方案可以完全符合你的需求：先把第一组列的所有行打完（行自动分页），再切页打第二组列的所有行，以此类推，完全不会出现列截断问题。

步骤1：调整ERB模板结构 #

给列添加索引属性标识原始列序号，补充打印专用容器：

<div id="pdf-export-grid" class="div-table">
  <!-- 此处为你原有的行循环逻辑，我补充行标识 -->
  <% @rows.each do |row| %>
    <div class="row">
      <% @column_values.each_with_index do |cell, idx| %>
        <div class="column column-border grid-cell-width <%= @add_class %>" 
             style="<%= cell["inline_styles"] %>"
             data-col-index="<%= idx %>">
          <% if (cell["value"].present? && !cell["value"].nil?) %>
            <%= cell["value"] %>
          <% else %>
            <br/>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
<!-- 打印处理结果容器 -->
<div id="print-container" style="display: none;"></div>

步骤2：添加JS处理逻辑 #

function prepareForPrint() {
  const COL_PER_PAGE = 10; // 单页可容纳的列数，根据实际打印效果调整
  const originalTable = document.getElementById('pdf-export-grid');
  const printContainer = document.getElementById('print-container');
  const allRows = Array.from(originalTable.querySelectorAll('.row'));
  const totalCols = allRows[0].querySelectorAll('.column').length;
  const colGroupCount = Math.ceil(totalCols / COL_PER_PAGE);

  printContainer.innerHTML = '';
  
  // 按列组生成独立的打印表格
  for (let groupIdx = 0; groupIdx < colGroupCount; groupIdx++) {
    const startCol = groupIdx * COL_PER_PAGE;
    const endCol = Math.min(startCol + COL_PER_PAGE - 1, totalCols - 1);
    // 生成新的子表格
    const newTable = document.createElement('div');
    newTable.className = 'div-table print-table';
    // 复制每行对应列组的单元格
    allRows.forEach(row => {
      const newRow = document.createElement('div');
      newRow.className = 'row';
      const cols = Array.from(row.querySelectorAll('.column'));
      for (let i = startCol; i <= endCol; i++) {
        newRow.appendChild(cols[i].cloneNode(true));
      }
      newTable.appendChild(newRow);
    });
    // 每个列组表格后添加强制分页符
    const pageBreak = document.createElement('div');
    pageBreak.style.pageBreakAfter = 'always';
    printContainer.appendChild(newTable);
    printContainer.appendChild(pageBreak);
  }

  // 切换打印视图
  originalTable.style.display = 'none';
  printContainer.style.display = 'block';
  window.print();
  // 打印完成后恢复原视图
  window.onafterprint = () => {
    originalTable.style.display = 'block';
    printContainer.style.display = 'none';
  };
}

步骤3：绑定打印触发 #

给你的打印按钮绑定prepareForPrint()方法即可实现需求。

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