html - 在一个 html 中打印多个“@page size”css 属性

问题描述

我有一个包含不同部分的 HTML 文件，要以不同的方向打印。例如，第 1 部分需要打印纵向，第 2 部分需要横向打印，第 3 部分需要再次打印纵向。最后这个 HTML 将被 puppeteer 打印成 PDF 格式。

这是 HTML 文件。（这也托管在https://mengtingliu972.github.io/so-question-multiple-page-sizes上）

<!DOCTYPE html>
<html>
<head>
<style>
.printable-letter.printable-portrait {
  page: letter-portrait;
}

.printable-letter.printable-landscape {
  page: letter-landscape;
}

@page letter-portrait {
  size: letter portrait;
  max-height: 100%;
  max-width: 100%
}

@page letter-landscape {
  size: letter landscape;
  max-height: 100%;
  max-width: 100%
}
</style>
</head>

<body>
  <div class="printable-portrait printable-letter">
    1 Portrait section

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo elit at imperdiet dui accumsan. Dignissim convallis aenean et tortor at. Leo integer malesuada nunc vel risus commodo viverra. Sed vulputate mi sit amet mauris commodo quis. Turpis in eu mi bibendum. Elit duis tristique sollicitudin nibh sit. Suspendisse interdum consectetur libero id. Nunc scelerisque viverra mauris in aliquam sem fringilla. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Rhoncus urna neque viverra justo nec ultrices dui. In eu mi bibendum neque egestas congue quisque egestas diam. Fermentum odio eu feugiat pretium nibh. Lectus vestibulum mattis ullamcorper velit sed. Consequat semper viverra nam libero justo laoreet. Dignissim suspendisse in est ante in nibh
  </div>

  <div class="printable-landscape printable-letter">
    2 Landscape section

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo elit at imperdiet dui accumsan. Dignissim convallis aenean et tortor at. Leo integer malesuada nunc vel risus commodo viverra. Sed vulputate mi sit amet mauris commodo quis. Turpis in eu mi bibendum. Elit duis tristique sollicitudin nibh sit. Suspendisse interdum consectetur libero id. Nunc scelerisque viverra mauris in aliquam sem fringilla. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Rhoncus urna neque viverra justo nec ultrices dui. In eu mi bibendum neque egestas congue quisque egestas diam. Fermentum odio eu feugiat pretium nibh. Lectus vestibulum mattis ullamcorper velit sed. Consequat semper viverra nam libero justo laoreet. Dignissim suspendisse in est ante in nibh.

    Vivamus at augue eget arcu dictum. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fermentum et sollicitudin ac orci phasellus egestas tellus. Sapien eget mi proin sed libero. Aliquam sem et tortor consequat id porta nibh venenatis. Arcu bibendum at varius vel. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Habitant morbi tristique senectus et netus et malesuada. Elit sed vulputate mi sit amet. Amet facilisis magna etiam tempor orci eu lobortis elementum. Purus faucibus ornare suspendisse sed nisi lacus. Cras adipiscing enim eu turpis egestas pretium aenean.

    Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. In nibh mauris cursus mattis. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Molestie at elementum eu facilisis. Quis lectus nulla at volutpat diam ut venenatis tellus in. Aliquet porttitor lacus luctus accumsan. Sit amet massa vitae tortor condimentum lacinia quis. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Feugiat pretium nibh ipsum consequat nisl. Tristique risus nec feugiat in fermentum posuere urna nec. Morbi blandit cursus risus at ultrices. Ornare arcu dui vivamus arcu felis bibendum. Nunc scelerisque viverra mauris in aliquam. Id diam maecenas ultricies mi eget. Tempus urna et pharetra pharetra massa massa ultricies. Habitasse platea dictumst quisque sagittis. Risus nullam eget felis eget nunc lobortis mattis aliquam.

    Arcu odio ut sem nulla. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Montes nascetur ridiculus mus mauris. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi eget mauris pharetra. Congue nisi vitae suscipit tellus mauris a. Hac habitasse platea dictumst quisque sagittis purus sit amet. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Posuere ac ut consequat semper viverra nam libero. Consequat id porta nibh venenatis cras sed felis eget. Amet nisl suscipit adipiscing bibendum est ultricies integer quis.

    Blandit volutpat maecenas volutpat blandit aliquam. Magna sit amet purus gravida. Lacus vestibulum sed arcu non odio. Viverra tellus in hac habitasse. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Commodo odio aenean sed adipiscing. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Malesuada proin libero nunc consequat interdum varius sit. Sapien nec sagittis aliquam malesuada bibendum. Nec sagittis aliquam malesuada bibendum arcu. Congue mauris rhoncus aenean vel. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Adipiscing elit duis tristique sollicitudin nibh sit amet.

    Nibh tellus molestie nunc non blandit massa enim nec dui. Amet tellus cras adipiscing enim eu turpis egestas pretium. Nec ultrices dui sapien eget mi proin sed libero enim. Dolor sit amet consectetur adipiscing elit pellentesque. Ut porttitor leo a diam. Odio tempor orci dapibus ultrices in. Risus ultricies tristique nulla aliquet enim tortor at auctor. Ipsum dolor sit amet consectetur adipiscing elit duis. Sit amet purus gravida quis blandit turpis cursus in. Cras ornare arcu dui vivamus arcu. Aliquet enim tortor at auctor urna nunc id. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Est sit amet facilisis magna etiam tempor orci. Tempus quam pellentesque nec nam. Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Pretium nibh ipsum consequat nisl vel pretium lectus. Quisque egestas diam in arcu cursus euismod quis viverra. Netus et malesuada fames ac. Integer vitae justo eget magna.

    Vitae justo eget magna fermentum iaculis eu non. Orci ac auctor augue mauris augue neque gravida in fermentum. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Habitant morbi tristique senectus et netus et malesuada fames. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Ac auctor augue mauris augue neque gravida in fermentum. Neque aliquam vestibulum morbi blandit cursus risus at. Sit amet mattis vulputate enim nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. In metus vulputate eu scelerisque. Pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Elit scelerisque mauris pellentesque pulvinar.

    At in tellus integer feugiat scelerisque varius morbi enim. Eget nunc lobortis mattis aliquam faucibus purus. Tristique et egestas quis ipsum suspendisse ultrices. Dictumst vestibulum rhoncus est pellentesque elit. Et leo duis ut diam quam nulla porttitor massa id. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Posuere morbi leo urna molestie at elementum. Vitae purus faucibus ornare suspendisse. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Nisi quis eleifend quam adipiscing vitae. Semper eget duis at tellus at urna condimentum. Sagittis aliquam malesuada bibendum arcu vitae. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Senectus et netus et malesuada fames ac turpis.
  </div>

  <div class="printable-portrait printable-letter">
    3 Another portrait section

    At in tellus integer feugiat scelerisque varius morbi enim. Eget nunc lobortis mattis aliquam faucibus purus. Tristique et egestas quis ipsum suspendisse ultrices. Dictumst vestibulum rhoncus est pellentesque elit. Et leo duis ut diam quam nulla porttitor massa id. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Posuere morbi leo urna molestie at elementum. Vitae purus faucibus ornare suspendisse. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Nisi quis eleifend quam adipiscing vitae. Semper eget duis at tellus at urna condimentum. Sagittis aliquam malesuada bibendum arcu vitae. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Senectus et netus et malesuada fames ac turpis.
  </div>
</body>
</html>

如果您在 chrome 浏览器上打开此 html 并转到打印对话框，您会看到第 2 部分与其他部分分开并打印在横向纸上。但是横向页面内的内容溢出到页脚上，并且一些内容被剪切到了纸张之外。我相信这是因为 Chrome 正在将带有纵向页面宽度和高度的第 2 节打印到横向纸上。

任何正确打印第 2 节的解决方案？（全纸宽，内容不溢出）

标签： htmlcsspdfpuppeteerlandscape

html - 在一个 html 中打印多个“@page size”css 属性

问题描述

解决方案

推荐阅读