如何用Puppeteer生成PDF时让横版页面内容占满宽度且居中

问题场景 #

使用Puppeteer将HTML生成PDF时，竖版页面显示正常，但横版页面的内容无法占满宽度，需要实现横版内容占满页面宽度且居中显示。

原代码示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @media print {
        @page {
          size: A4;
        }

        @page landscape {
          size: A3 landscape; /* here page can be A4 or A3 depending on some business logic */
        }

        .landscape {
          page: landscape;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Portrait page.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
    <div class="landscape">
      <h1>Landscape page.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
    <div>
      <h1>Portrait page again.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
  </body>
</html>

解决方案 #

修改CSS样式，调整页面边距、容器布局，确保横版内容适配页面宽度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      @media print {
        /* 基础竖版页面设置，统一边距 */
        @page {
          size: A4;
          margin: 2cm;
        }

        /* 横版页面设置，明确尺寸和边距 */
        @page landscape {
          size: A3 landscape;
          margin: 2cm;
        }

        /* 横版容器样式 */
        .landscape {
          page: landscape;
          width: 100%;
          margin: 0 auto;
          /* 强制分页，避免和前后内容混排 */
          page-break-before: always;
          page-break-after: always;
        }

        /* 确保段落和标题在横版页面内自适应 */
        .landscape h1, .landscape p {
          width: 100%;
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Portrait page.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
    <div class="landscape">
      <h1>Landscape page.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
    <div>
      <h1>Portrait page again.</h1>
      <p>
        Tenderloin ham boudin tongue sausage venison short ribs sirloin,
        kielbasa beef ribs. Strip steak shank bresaola salami spare ribs
        kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly
        ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank
        corned beef short loin, speck turkey pancetta shankle frankfurter.
        Pancetta tail fatback, ground round brisket biltong frankfurter turkey.
        Ham hock chicken strip steak, salami short ribs beef ribs pork sirloin
        pastrami pork loin turducken rump brisket andouille.
      </p>
    </div>
  </body>
</html>

关键修改说明 #

• 全局盒模型重置：添加* { box-sizing: border-box; margin: 0; padding: 0; }，避免默认边距和盒模型导致的宽度计算偏差。
• 统一页面边距：给@page和@page landscape设置明确的margin，确保页面可用宽度一致，内容不会被默认边距挤压。
• 横版容器优化：
  • 增加page-break-before: always和page-break-after: always，强制横版内容单独占一页，避免和竖版内容混排。
  • 设置margin: 0 auto确保容器居中，width: 100%让内容填满页面可用宽度。
• 内容对齐：给横版内的标题和段落设置text-align: center，实现内容居中显示。

Puppeteer生成PDF的补充建议 #

调用Puppeteer时，确保禁用默认的边距设置，避免覆盖CSS中的页面边距：

await page.pdf({
  format: 'A4',
  printBackground: true,
  margin: { top: 0, right: 0, bottom: 0, left: 0 } // 禁用默认边距，使用CSS定义的边距
});

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