puppeteer生成pdf与网页显示为什么不一致？

Question

puppeteer生成pdf与网页显示为什么不一致？

发布于
2023-12-14 广东

用puppeteer生成网页的pdf，网页排版用的div（float）>table ，网页看是正常的，生成pdf就多了一点空隙
网页正常显示

pdf显示多了空白间隙

finderror.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /* A4-纵向 */
      .wrapper-v {
        /* 边距为0 */
        width: 794.12px;
        /* 边距为5cm,对应需减去边距 */
        width: 756.305px;
        /* min-height: 1090px; */

        /* width: 1075px;
  height: 1568px; */
      }

      /* A4-横向 */
      .wrapper-h {
        /* width: 1090px;
    min-height: 794px; */
        /* 边距为0 */
        width: 1123.11px;
        /* 边距为0.5cm,对应需减去左右边距 */
        width: 1085.295px;

        /* width: 1569px;
  height: 1075px; */
      }

      .wrapper {
        /* display: flex;
    flex-direction: column;
    align-items: center;
    clear: both; */
        /* 使用样式控制分页 */
        /* margin-left: 25px; */
        /* 影响puppeteer分页 */
        /* display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap; */
        box-sizing: border-box;
        /* 控制在打印预览中的左边距，设置为0则贴边，上边距在page里设置 */
        /* padding: 15px 15px; */
        /* padding-top: 15px; */
        /* padding-left: 15px; */
        padding: 1px;
        /* clear: both; */
        overflow: hidden;

        /* 使用样式控制分页 */
      }

      .w-h,
      .w-v {
        float: left;
        /* page-break-inside: avoid; */
      }

      /* 纵向-外框 */
      .w-v {
        /* width: 266px;
    height: 361px; */
        width: 272.27px;
        height: 369.07px;
        /* 1cm = 39.862px */
        /* width: 287.006px;
    height: 389.053px; */
        /* 1cm=41.192px */
        /* width: 298.742px;
    height: 404.962px; */
      }

      /* 横向-外框 */
      .w-h {
        /* width: 382px;
    height: 235px; */
        width: 391.01px;
        height: 240.13px;

        /* width: 392px;
    height: 241px; */
      }

      .wrapper-v .w-v:nth-of-type(4n) {
        /* margin-bottom: 180px; */
        page-break-after: always;
      }

      .wrapper-h .w-v:nth-of-type(6n) {
        /* margin-bottom: 120px; */
        page-break-after: always;
      }

      .w-v table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border: 1px solid black;
        page-break-inside: avoid;
      }

      .w-v table tr:first-of-type {
        font-weight: bolder;
        font-family: "仿宋";
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 15px;
        letter-spacing: 8px;
      }

      .w-v table tr:nth-of-type(2) {
        height: 208px;
        text-align: center;
      }

      .w-v table tr:nth-of-type(3),
      .w-v table tr:nth-of-type(4),
      .w-v table tr:nth-of-type(5) {
        height: 28px;
      }

      .w-v table tr:nth-of-type(6) {
        height: 36px;
        text-align: center;
        font-family: fangsong;
        font-weight: bolder;
      }

      .w-v table tr:nth-of-type(2) td .w-v table tr:nth-of-type(3) td,
      .w-v table tr:nth-of-type(4) td,
      .w-v table tr:nth-of-type(5) td {
        font-size: 16px;
        text-align: center;
      }

      .w-v table tr:nth-of-type(3) td,
      .w-v table tr:nth-of-type(4) td,
      .w-v table tr:nth-of-type(5) td {
        font-size: 14px;
        line-height: 16px;
        text-align: center;
      }

      .w-v table tr:nth-of-type(2) td {
        /* width: 260px; */
        line-height: 30px;
        font-family: "Microsoft YaHei";
        font-size: 26px;
        /* 使用puppeteer时，竖向文字不起效果 */
        /* writing-mode: vertical-lr; */
        /* letter-spacing: 5px; */
      }
      /* 解决使用puppeteer时，竖向文字不起效果 */
      .w-v table tr:nth-of-type(2) td span {
        display: inline-block;
        width: 25px;
        line-height: 32px;
      }

      /* .w-v table tr:nth-of-type(3) td,
.w-v table tr:nth-of-type(4) td{
    vertical-align: middle;
} */

      .w-v table tr:nth-of-type(5) td {
        font-size: 15px;
      }

      @media print {
        body {
          margin: 0;
          padding: 0;
        }

        @page {
          /* margin: 1cm -0.25cm; */
          /* margin: 0cm; */
          /* 此处设置size 影响pdf横向纸张生成 */
          /* size: a4; */
          margin: 0.5cm;
          scale: 1;
          /* 设置打印上边距 */
          /* margin-top: 25px; */
        }

        body {
          /* 页面背景色 通过js控制 */
          /* Chrome、Safari 等 webkit 浏览器内核 */
          -webkit-print-color-adjust: exact;
          /*  火狐 */
          print-color-adjust: exact;
          color-adjust: exact;
        }

        .wrapper {
          margin: 0;
          padding: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper wrapper-h">
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="vertical w-v">
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td><span></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td><span class="down_line"></span></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </div>
</div>
  </body>
</html>

createPdf.js

const puppeteer = require("puppeteer");
const path = require("path");

(async function () {
  const browser = await puppeteer.launch({
    headless: true,
  });
  const page = await browser.newPage();
  await page.goto(
    "file:///G:/finderror.html",
    {
      timeout: 0,
    }
  );

  await page.waitFor(5000);

  await page.pdf({
    scale: 1,
    printBackground: true,
   

    /* ————————————更改纸张方向及颜色———————————————— */
    // 设置纸张是否为横向
    landscape: true,
    /* ————————————更改纸张方向及颜色———————————————— */

    format: "A4",
    path: path.join(__dirname, "./测试.pdf"),
  });
  await browser.close();
})();

尝试：