打印时使 HTML 适合 1 页答案

【问题标题】：Fit HTML onto 1 page when printing打印时使 HTML 适合 1 页
【发布时间】：2022-01-01 21:02:55
【问题描述】：

我正在使用 Swift 和 WKWebView 加载一些 HTML，设置 A4 页面尺寸，并将其保存为 PDF。（虽然我认为这主要是一个与 HTML/CSS 相关的问题）。

它是这样生成的：

    func generatePDFData(landscape: Bool, newLayout: Bool) -> NSMutableData {
        var a4PageFrame: CGRect?
        a4PageFrame = landscape ? CGRect(x: 0, y: 0, width: 841.8, height: 595.2) : CGRect(x: 0, y: 0, width: 595.2, height: 841.8)

        let originalBounds = bounds
        bounds = CGRect(x: originalBounds.origin.x, y: bounds.origin.y, width: bounds.size.width, height: scrollView.contentSize.height)

        let printFormatter = viewPrintFormatter()
        let printPageRenderer = UIPrintPageRenderer()
        printPageRenderer.addPrintFormatter(printFormatter, startingAtPageAt: 0)
        printPageRenderer.setValue(a4PageFrame, forKey: "paperRect")
        printPageRenderer.setValue(a4PageFrame, forKey: "printableRect")

        printPageRenderer.headerHeight = newLayout ? 10 : 25
        printPageRenderer.footerHeight = newLayout ? 10 : 25

        bounds = originalBounds

        return printPageRenderer.renderPDFData()
    }

还有一些示例 HTML：

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <style>
    /* General styles for page */
    body {
      max-width: 100%;
      margin: auto;
      padding: 10px;
      font-size: 16px;
      font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
      color: #000;
    }

    #headerDiv {
      padding: 1px 10px;
      background-color: #C40000;
      color: #ffffff;
    }

      h4 {
        background: #C40000;
        color: #ffffff;
        width: 95%;
        padding: 5px;
      }

    .info {
      background: none;
      border-bottom: none;
      font-weight: bold;
    }

    /* General table styles */
    table {
      width: 95%;
      line-height: inherit;
      text-align: left;
      margin: 0 auto;
    }

    /* All cell headings */
    table th {
      padding: 5px 15px 5px 15px;
      background: #eee;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
    }

    /* Second column heading only */
    table:not(.valvesTable) th:nth-child(2) {
      text-align: right;
    }

    /* Record fields/results */
    table td {
      padding: 5px 15px 5px 15px;
      vertical-align: top;
      border-bottom: 1px solid #eee;
    }

    /* Record fields */
    table tr td {
      text-align: left;
      width: 40%;
    }

    /* Record results */
    table:not(.valvesTable) tr td:nth-child(2) {
      text-align: right;
      width: 60%;
      white-space: pre-line;
    }

    /* Not yet saved */
    .NotYetSaved {
      color: grey;
      font-style: italic;
    }

    .NoNone {
      color: grey;
    }

    .iconImage {
      float: right;
      padding: 100;
      display: block;
      margin: 0 auto;
      max-height: 75px;
      max-width: 75px;
    }

    /* MARK: - Two columns */
    .column {
      float: left;
      width: 50%;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>



<body>
    <div id="headerDiv">
        <p style="text-align:left;">
            Report for ID: null
            <span style="float:right;">
                App
            </span>
            <br>
            FAKE DATA
            <span style="float:right;">
                Generated: 23 November 2021 10:50 GMT
            </span>
        </p>
    </div>

  <div class="row">
    <div class="column">
      <h4>Table 1</h4>
      <table>
        <tr>
          <th>Field</th>
          <th>Entry</th>
        </tr>
        <tr>
    <td>Data 1</td>
    <td>11%</td>
</tr>
<tr>
    <td>Data 2</td>
    <td>21.53%</td>
</tr>
<tr>
    <td>Data 3</td>
    <td>6.55%</td>
</tr>
<tr>
    <td>Data 4</td>
    <td class="NotYetSaved">Not yet saved</td>
</tr>

      </table>

      <h4>Table 2</h4>
      <table class="valvesTable">
        <tr>
          <th>Valve</th>
          <th>D</th>
          <th>P</th>
          <th>A</th>
        </tr>
        <tr>
    <td>Data 1</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 2</td>
    <td>23</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 3</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 4</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 5</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 6</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 7</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 8</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>

      </table>
    </div>

    <div class="column">
      <h4>Table 3</h4>
      <table>
        <tr>
          <th>Field</th>
          <th>Entry</th>
        </tr>
        <tr>
    <td>Data 1</td>
    <td>3.23%</td>
</tr>
<tr>
    <td>Data 2</td>
    <td>3.49%</td>
</tr>
<tr>
    <td>Data 3</td>
    <td>1.51%</td>
</tr>

      </table>

      <h4>Table 4</h4>
      <table>
        <tr>
          <th>Field</th>
          <th>Entry</th>
        </tr>
<tr>
    <td>Data 2</td>
    <td>23</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 3</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 4</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 5</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 6</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 7</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
<tr>
    <td>Data 8</td>
    <td class="NotYetSaved">Out of bounds</td>
    <td class="NotYetSaved">Not calculated</td>
    <td class="NotYetSaved">Not calculated</td>
</tr>
        
      </table>
    </div>
  </div>
</body>

</html>

有没有办法通过自动调整使其适合一页？即，缩小表格以适应一页（即使这意味着使字体等变小，它可能会这样做）。有时更多，有时更少——它们是用户生成的。它通常是横向打印的 - 即使在桌面上它也不适合：

【问题讨论】：

这能回答你的问题吗？ print css: fit in one page
@AmirNaeem 不完全，但它有帮助 - 谢谢！

标签： html css ios swift html-table

【解决方案1】：

您可以尝试在 HTML 或 body 上缩放 CSS 属性，并根据您的要求调整百分比值。

@media print {
  html {
    zoom: 50%;
  }
}

【讨论】：

认为这可能是目前最好的选择，谢谢。理想情况下希望这样做，但我猜想可以缩放以适应页面，或者看到一定尺寸，因为它总是 A4，因此我知道尺寸。