html - 当我在 Expo (iOS) 中使用 Print API 打印 html 时，html 中的分页符无法按预期工作-6ren

html - 当我在 Expo (iOS) 中使用 Print API 打印 html 时，html 中的分页符无法按预期工作

转载作者：行者123 更新时间：2023-11-29 05:12:45

我尝试向 html 添加分页符并使用 Expo Print API 打印 html在我的 Expo 应用程序中。

<html>
<body>
<h1>Page 1</h1>
<div class="pagebreak"></div>
<h1>Page 2</h1>
<div class="pagebreak"></div>
<h1>Page 3</h1>
<div class="pagebreak"></div>
</body>
<style>
@page print {
    .pagebreak { break-before: page; }
}
@media print {
    .pagebreak { break-before: page; }
}
@page print {
    .pagebreak { page-break-before: always; }
}
@media print {
    .pagebreak { break-before: always; }
}
</style>
</html>

但是在 iOS 中，这些样式都不起作用。

但其中之一可以在 Android 上运行。仅保留以下样式，

@media print {
    .pagebreak { break-before: page; }
}

然后在expo Snack中选择android模式，然后我们就找到了预期的分页符。

可重现的示例:Expo snack example .我只关心 iOS 模式，所以不需要担心 android 或 web。

注意:问题类似于How to avoid page breaks inside content sections in output PDF generated from HTML using Expo.printToFileAsync on iOS但该问题没有提供可重现的示例，并且其描述包含一些冗余信息。这就是我在这里创建一个新问题的原因。

最佳答案

该问题似乎是 iOS Safari 对 @print 和 page-break-before 和/或 UIMarkupTextPrintFormatter 支持的问题 (https://github.com/expo/expo/blob/master/packages/expo-print/ios/EXPrint/EXPrint.m#L78 )。

这里有一个 CSS 解决方法，您可以使用它代替分页符来实现相同的效果:将每个页面包装在 wrapper CSS 类中，并使其占据整个页面的高度。

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: block;
    position: relative;
    height: calc(100% - 32px); 
    margin: 0;
    padding: 16px;
}

HTML

<body>
  <div class="wrapper">
    <h1>Page 1</h1>
  </div>
  <div class="wrapper">
    <h1>Page 2</h1>
  </div>
  <div class="wrapper">
    <h1>Page 3</h1>
  </div>
</body>

更多信息请参阅世博会问题:https://github.com/expo/expo/issues/6680#issuecomment-578353288。如果添加更好的解决方案，将编辑此答案。

关于html - 当我在 Expo (iOS) 中使用 Print API 打印 html 时，html 中的分页符无法按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59524655/