html - 验证每个 div 将在单独的打印页面上

Posted 2023-03-06

【中文标题】html - 验证每个 div 将在单独的打印页面上

【英文标题】：html - verify that each div will be on separated print page

【发布时间】：2017-02-09 19:45:20

【问题描述】：

我有很多 div 建议打印在不同的页面上。 如何确保当用户单击打印按钮时，每个 div 将位于不同的页面上？

谢谢！

【问题讨论】：

如果可能的话，用一些代码描述不清楚的问题

【参考方案1】：

您可以在print media query 中使用page-break-after attribute。优点是，您不必更改 div 的大小，只需确保分页符位于 div 之后。

@media print 
    div 
        page-break-after: always;
    

更多information about page-break-after on MDN.

【讨论】：

这解决了我的问题！谢谢。我现在如何确保此页面中的 div 将完全在页面上（我不希望 div 被夹在 2 个页面之间）？

如果内容长度未知，则不能。也许您可以在打印媒体查询中为您的 div 设置一个较小的font-size...

【参考方案2】：

在 css 中，有一个媒体查询可用于在您想要打印网页时专门设置网页格式：

@media print 
  /* insert your style declarations here */
  div 
    page-break-after: always; /* ensures the next will we appear on new page */
  

当用户决定打印时，您可以使用此媒体查询使每个 div 填满整个页面。您可以使用它来修改用户决定打印时删除导航栏等内容。

另一方面，为了避免在某个元素后直接中断，请使用page-break-after: avoid;

您还可以使用以下命令以您想要指定的特定格式进行打印：

@page 
  size: A4; /* or A4 landscape or A5 */

【讨论】：

视口高度和宽度在这里用处不大，因为它不代表页面大小...

@Andreas 有什么东西可以代表 css 中的打印页面大小吗？

宽度和高度破坏了页面