Please provide the following:
SDK Version: 35
Platforms(Android/iOS/web/all): IOS
Hi All,
I’m having an issue that has been brought up on this forum, whereby I am unable to enforce page breaks in a html file that is being used to generate a PDF document. With results similar to what has been posted here:
Hey Guys,
When we use a file explorer app and navigate to the cache directory of expo app we don’t see anything. The uri which we get on console log in response to
await Print.printToFileAsync({ 'html':'<h1>Wassup<h1>' }); is not accessible.
Can anybody please help us out? thanks
Has anyone found a workaround to this problem, or is it planned on being fixed in the SDK at some point? Would it be possible to implement the ‘markupFormatterIOS’ option into the printToFileAsync function, as it appears to respect the CSS page breaks when I preview to print using the printAsync method.
wodin
November 18, 2019, 9:52am
2
Hi.
Did you link to the wrong post? That is a completely different problem.
Could you post the HTML you’re trying to print? I have not tried this myself, but it would be easier for me to do so if you post what you’ve tried. Maybe as a snack .
Apologies, that was the wrong link. Was meant to be this one that I was referring to:
Hi! I use Expo.Print to generate PDF from HTML. On Android everything works fine, but on iOS the output PDF has page breaks inside content sections, even that I use
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
or
display: inline-block;
or
display: inline-table;
Does anyone know how to avoid page breaks in output PDF on iOS? What webview engine does Expo use in Print api on iOS?
Here is a snack you can test on iOS https://snack.expo.io/@serhiipalash/te…
The HTML I am using is the following, just a rough template that I was looking at getting working before I connected it up with my app.
<!doctype html>
<html class="no-js" lang="en" style="margin:0; padding:0; display:flex; width: 595px;">
<head>
<meta charset="utf-8">
<title>Building Inspection - 123 Test St</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
@page {
margin: 0;
}
@media print {
footer {
position: fixed;
bottom: 2px;
}
}
</style>
<body
style="position:relative; margin:0; padding:0; font:10pt Avenir Next, 'Times New Roman', Times, serif; line-height: 1.3; color: #2D3748;line-height: 1.3; background: #fff !important; padding:20px;">
<!-- Page -->
<div style="page-break-after: always;">
<!-- Page 1 - General Overview -->
<div style="z-index: 1;height:100%; display:flex; flex-direction:column;">
<div>
<img width="100" style="margin: 10px 0 0 10px" src="./assets/logo_splash.svg" />
</div>
<div style="margin-top:220px">
<p
style="font-size: 24pt; font-weight:bold; margin:0; padding:0; width: 350px; margin-left: 220px; margin-bottom: 40px">
Building Inspection Report
</p>
<p
style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
Inspection Address</p>
<p style="font-size:10pt;margin:0; padding:0; margin-left: 220px;">123 Test St, Albury, NSW, 2640</p>
<p
style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
Inspected By:</p>
<p style="font-size:10pt; margin:0; padding:0; margin-left: 220px;">John Smith
</p>
<p
style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
Prepared For:</p>
<p style=" font-size:10pt; margin:0; padding:0; margin-left: 220px;">Annie Oakley</p>
</div>
<div style="text-align: center; margin-top: 150px">
<p style="font-size:8pt; font-weight:bold; margin:0; padding:0">Inspection Date</p>
<p style="font-size:10pt; margin:0; padding:0">12th November 2019</p>
</div>
</div>
</div>
<!-- Page -->
<div style="page-break-after: always;">
<div class="display:flex; flex-direction:column;">
<p style="font-size: 18pt;font-weight:bold; margin:30px 0; padding:0; page-break-before: always;">Section
</p>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<p style="font-size: 18pt;font-weight:bold; margin:30px 0; padding:0; page-break-before: always;">Section
</p>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
Question Title Question Title Question Title</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2, Question 3, Question 4</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
<!-- Question Row -->
<div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center; flex: 1">
<div style="width:20px; height: 20px;">
<svg width="20" height="20" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="#68D391" />
<path
d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
fill="#276749" />
</svg>
</div>
<p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
</p>
</div>
<p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
</div>
<hr
style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
<p style="font-style:italic; color: #718096">Comments here</p>
</div>
</div>
<footer>
<p style="text-align: center; font-size:7pt; margin: 20px 0 0 -30px; padding: 0;">This report was completed
on
12/11/2019 by
John Smith.</p>
</footer>
</body>
</html>
Then I was using the following to render it.
let pdf = await Print.printToFileAsync({
html: '<html here />,
width: 595,
height: 842
})
And this was the output that I was getting, I was hoping to have the outlined divs with each question flow onto a new page without being slip as they are:
wodin
November 19, 2019, 10:00am
4
I’m not sure if this will help, but can you try some of the options mentioned here ?
Thanks for your reply,
Unfortunately I didn’t have any luck with those suggestions, you wouldn’t happen to have a work piece of HTML I could try as a reference?
system
December 25, 2019, 11:51am
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
