printToFileAsync Not Respecting CSS Page Breaks

Please provide the following:

  1. SDK Version: 35
  2. 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:

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.

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:

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:

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?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.