I tried to add page break to an html and print the html using Expo Print API in my Expo app.
<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>
However in iOS, none of these styles work.
But one of them work in android. Keep below style only,
@media print {
.pagebreak { break-before: page; }
}
then pick android mode in expo snack, then we find the expected page break.
The reproducible example: Expo snack example. I care about iOS mode only, so no need to worry about android or web.
Note: the question is similar to How to avoid page breaks inside content sections in output PDF generated from HTML using Expo.printToFileAsync on iOS but that question does not provide a reproducible example and its description contains some redundant information. That's why I create a new question here.