如何使用 CSS @Media Query 打印一些横向内容和一些纵向内容？

Question

我在我的React项目中创建了一个报告表，只是一个包含这么多数据的详细报告，所以这个报告有很多表格，需要以硬拷贝的形式打印这个报告表。现在我想要的是，如果单击下面的打印按钮，我想打印一些横向格式的表格和一些纵向格式的表格。

我已经调整了

@media print

查询，如下所示：

@media print {
  @page {
    counter-increment: page 1;
    margin: 0.5cm;
    size: A4 landscape;

    @bottom-left {
      content: counter(page) " / " counter(pages);
      display: none;
    }
  }
}

这工作正常，默认情况下我可以看到横向打印，这很好。我有很多表格和报告，这意味着如果我打印表格，将会有很多页，因此我希望以纵向格式打印一些表格。 我该怎么做？

Answer 1

由于您总是以A4横向打印，因此可以考虑在表格上设置

width: 210mm; height: 297mm;

（A4的标准尺寸）以纵向模式显示。

function generateTable(tableId, rowsCount) {
  const tableBody = document.getElementById(tableId).querySelector('tbody');
  for (let i = 0; i < rowsCount; i++) {
    let row = tableBody.insertRow();
    for (let j = 0; j < 10; j++) {
      let cell = row.insertCell(0);
      cell.innerHTML = `Data ${i + 1}-${j + 1}`;
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  generateTable('table1', 100);
  generateTable('table2', 100);
});

table {
  font-size: 24px;
}

@media print {
  @page {
    counter-increment: page 1;
    margin: 0.5cm;
    size: A4 landscape;
    @bottom-left {
      content: counter(page) " / " counter(pages);
      display: none;
    }
  }
  .portrait-table {
    width: 210mm;
    height: 297mm;
  }
}

<h1>Large Report Sheet</h1>
<h2>Large Table 1 (Landscape)</h2>
<table class="landscape-table" id="table1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
      <th>Header 9</th>
      <th>Header 10</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<hr>

<h2>Large Table 2 (Portrait)</h2>
<table class="portrait-table" id="table2">
  <thead>
    <tr>
      <th>Header A</th>
      <th>Header B</th>
      <th>Header C</th>
      <th>Header D</th>
      <th>Header E</th>
      <th>Header F</th>
      <th>Header G</th>
      <th>Header H</th>
      <th>Header I</th>
      <th>Header J</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>