Tips for automatically breaking or paginating HTML in order to ensure that the resulting PDF mirrors the paginated HTML layout

I'm looking to implement a feature that automatically breaks or paginates HTML content in order to ensure that the resulting PDF matches the appearance of the original HTML.

Requirement: If HTML content exceeds the size of an A4 paper, it should be split onto a new page.

Question: How can I achieve pagination when content surpasses the dimensions of an A4 paper by utilizing a Vue plugin like vue-html2pdf?

Steps to Reproduce:

  1. Clicking on the 'Auto add textcontent' button will generate multiple text lines and pages, but pagination is not functioning properly;

  2. Clicking on the 'Generate pdf' button successfully generates a PDF with proper pagination. Is there a way to enable automatic pagination without having to actually generate the PDF?

To view what I have attempted so far, please visit this Codesandbox link

javascripthtmlcssvue.jspagination

Answer №1

To create a page break in your PDF, simply add an HTML element with the class html2pdf__page-break. This will instruct the document to start a new page after that specific element. Here is an example:

<div class="html2pdf__page-break"/>

After including the above <div>, all content following it will be displayed on a new page. This method works seamlessly with the package's automatic pagination feature, even without activating the manual-pagination property.

It is advisable to segment the content within the pdf-content section into distinct sub-sections known as pdf-item. Here is a sample structure:

<section slot="pdf-content">
    <section class="pdf-item">
        <h4>Your Title</h4>
        <span>
            Some text...
        </span>
    </section>

    <div class="html2pdf__page-break"/>

    <section class="pdf-item">
        <span>
            Additional content...
        </span>
    </section>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)

I have an NPM package that is built for ESM and CJS formats. The package has a dist folder in the root directory, which contains: dist/esm - modules with ESM dist/cjs - modules with CJS dist/types - typings for all modules In the package.json file, there ...

javascriptnode.jstypescriptnpmpackage.json

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

javascriptreactjsnext.jswidgetcoinmarketcap

What is the best way to reference the className within nested SCSS when working with Next.js and React.js?

I am working on customizing a navbar that includes a hamburger button. My goal is to change the style, specifically the bar color and the appearance of the hamburger button, upon tapping. I have already attempted using &:active and .activeBar in the SCSS f ...

javascriptcssreactjssassnext.js

Troubleshooting: Inline Styles not displaying Background Div Images in Next.Js

I am currently attempting to display images in a component by using a map and an external JS file to store the images as objects. I then loop through them to set each one as a background image for every created div. However, it seems like my current implem ...

cssreactjsimagenext.js

Ways to deactivate a text area or mat-form-field

I need assistance with disabling a form field using Angular (4) + Angular Material and Reactive Forms. I have tried searching for syntax options like disabled="true", but haven't found the correct one yet. Can you please provide me with the right synt ...

htmlangularangular-material

Tips for centering a horizontal unordered list within a division element

I can't seem to figure out why the text-align center isn't working. I've followed other tutorials and applied the textalign: center to the div, then added display: inline to the ul. Below is a sample of my HTML code from the browser as I am ...

htmlcsswordpresstwitter-bootstrap

What is the best way to implement a click event on the v-data-table component?

I am facing an issue where the editItem function is not being called when I click on a table row. The current behavior is that clicking on the row does not display the details page, but if I put the click event on a specific table data cell, the editItem f ...

vue.jsvuetify.js

Moving a file to the Download folder in Cordova

CHALLENGE: In my mobile app, I am facing an issue where I need to download a file and store it in the Download folder. The downloading process is functioning correctly. The file is successfully downloaded from the server and saved in the following direct ...

androidcordovavue.jscordova-pluginsquasar-framework

What was the inspiration behind Spotify's section design?

Spotify has cleverly hidden the overflowing content without showing a scrollbar, allowing users to swipe through the list. How did they achieve this? I am currently using tailwindcss if that makes a difference. https://i.stack.imgur.com/z59yv.png ...

cssreactjstailwind-css

The attribute of the Angular div tag that lacks an equal sign

Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...

javascripthtmlcssangularjsattributes

Combining shapes in three.js

I've encountered a scenario where my scene consists of multiple meshes, each with different shapes and sizes. By looping through each mesh and utilizing geometry.merge(), I successfully created a new mesh from the geometries in the scene. The challe ...

javascriptmergethree.jsgeometry

Can data be transmitted to two separate scripts simultaneously?

Just a quick HTML inquiry: Can data from HTML forms be sent to two separate scripts using the "action" attribute, or is there an alternative method? I'd like to explore other options aside from utilizing curl. ...

phphtmlformspost

Utilizing Gulp for optimizing JavaScript files for web browsers, including import statements

Creating Isomorphic React Components I am looking to transpile my React components server-side into a single bundle.min.js file. However, I am encountering an issue where the import statements are not being resolved in the resulting file. The specific fi ...

javascriptnode.jsgulpisomorphic-javascript

JavaScript: Generating multiple variables using a for loop?

Is there a way to dynamically create n variables a_1, a_2, a_3 ... a_n, where the value of n is determined during runtime? Attempting to use the following code would not produce the desired outcome: var n = prompt("Enter number of variables?"); for (i= ...

javascriptloopsvariablesfor-loop

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

Exploring ways to update the navigation bar upon scrolling to shrink its size and modify the color scheme (specifically, transitioning from a transparent background to white and altering font colors). Below is the HTML snippet: /* Defining the overa ...

javascripthtmlcss

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

My website incorporates the jQuery.validationEngine plugin to ensure the accuracy of user input. The tooltips that accompany this validation feature are particularly appealing; they gracefully fade in and vanish when users interact with them. To visualize ...

javascriptjqueryjquery-plugins

Surprise scrolling on a mobile device's screen

I am trying to figure out why there is a horizontal scroll bar on the page. I would like the content to fill the entire screen. https://i.sstatic.net/Y0ToM.png <section class="who" data-aos="fade-in"> <img class=" ...

htmlcssbootstrap-4

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Extracting URLs using Selenium from specific cells within a table

While parsing a webpage table, I noticed that one of the columns contains a hyperlink. The structure of the table is as follows: <table id="GridView1"> <tbody> <tr> ... </tr> <tr> ...

pythonhtmlseleniumpandas