Image get cut between pages

[dudif91]

Describe the bug Hi i'm using the package to generate pdf from my page... the output is long and I get this issue as shown in the attached image.

how can I avoid cutting data in the middle?

Screenshots

Package Version e.g. 1.8.0

Additional context using vue 2 with vuetify

thanks!

[kempsteven]

Please have a look at this guide:

https://github.com/kempsteven/vue-html2pdf#guide

I've added comments in there how to properly set up the html

[dudif91]

@kempsteven I've tried to follow the guide but wasn't able to find the right solution for some sections whose content is bigger than 1 page...

[kempsteven]

can i have a sample of your code? with static data

[dudif91]

@kempsteven hi i'm working with vuetify and it would be really hard to take a sample of the code...

            <v-card flat outlined height="100%" class="overflow-y-auto px-6 d-flex flex-column align-center">
                <template v-if="incident">
                    <vue-html2pdf
                        ref="html2Pdf"
                        pdf-format="a4"
                        :paginate-elements-by-height="1200"
                        :enable-download="false"
                        :preview-modal="false"
                        :filename="pdfName"
                        :pdf-quality="2"
                        :float-layout="false"
                        @beforeDownload="beforeDownload"
                    >
                        <template #pdf-content>
                            <v-app class="inner-background">
                                <section class="pdf-item">
                                    <incident-summary
                                        :incident="incident"
                                        :free-text="postmortem.incidentSummaryText"
                                        @change="updatePostmortem('incidentSummaryText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-milestones
                                        :milestones="milestones"
                                        :free-text="postmortem.milestonesText"
                                        @change="updatePostmortem('milestonesText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-impact
                                        :free-text="postmortem.impactText"
                                        @change="updatePostmortem('impactText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-highlights />
                                </section>
                                <section class="pdf-item">
                                    <incident-root-cause
                                        :free-text="postmortem.rootCauseText"
                                        @change="updatePostmortem('rootCauseText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-resolution
                                        :free-text="postmortem.resolutionText"
                                        @change="updatePostmortem('resolutionText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-retrospective
                                        :keep-free-text="postmortem.retroToKeepText"
                                        :improve-free-text="postmortem.retroToImproveText"
                                        @change-keep="updatePostmortem('retroToKeepText', $event)"
                                        @change-improve="updatePostmortem('retroToImproveText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-action-items
                                        :free-text="postmortem.actionItemsText"
                                        @change="updatePostmortem('actionItemsText', $event)"
                                    />
                                </section>
                                <section class="pdf-item">
                                    <incident-artifacts :incident="incident" :events="events" />
                                </section>
                            </v-app>
                        </template>
                    </vue-html2pdf>
                </template>
            </v-card>

can you see from this code something that can help?

[kempsteven]

You can try removing the <template> tag

and just add slot="pdf-content" on <v-app class="inner-background"> tag, i think that will work.

<v-app class="inner-background" slot="pdf-content">

[dudif91]

Hi @kempsteven, thanks for the response but actually it didn't change any behavior.

[kempsteven]

can you try making a new vue.js project /w vuetify and add your sample code just static data is enough and push it to a public repo and I'll try to debug what is happening.

In another note, have you tried playing with the props :paginate-elements-by-height value? maybe set it to a lower value? like 1000 or something?

[AakashSanariya]

In My Page when i call this function html2pdf().set(opt).from(element, "element").save(); at that time auto page break not working properly