Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo:

https://i.sstatic.net/1tqKM.jpg

Is there a solution to this issue? I also attempted to use html2pdfrocket.com, but encountered the same problem.

The text is contained within the following HTML structure:

<html>
 <body>
  <div class="overall">
   <div class="content">
    <div class="wrapper">
     <div class="article">
      Text
htmlcsspdfhtml2pdfhtml-to-pdf

Answer №1

After encountering an issue with compiling content within multiple divs, I discovered that CSS rules were not resolving the problem.

To address this issue, I came up with the idea of generating a "raw-html-output" document. This document only contains:

<html>
 <head>
  <style>
   The necessary CSS rules.
  </style>
 </head>
 <body>
  Some text here.
 </body>
</html>

No additional elements are included.

The data is then extracted by an API from the simplified HTML file and compiled successfully.

Answer №2

In my opinion, a good approach would be to avoid paragraph breaks when printing. One way to achieve this is by using the following code:

@media print and (min-width:700px) {
    /* customize the selector accordingly */
    .article {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

Answer №3

If you're a fan of using firefox, simply open the HTML document using it and add the PDF Mage extension. Once it's installed, all you need to do is click the icon to convert the page into a PDF format. I've personally had smooth experiences using this method every time.

Best regards

Answer №4

If you're looking to convert your HTML to PDF, you might want to give the Syncfusion online demo a try. They have a tool that can handle text and image splitting across different pages.

Disclaimer: I am affiliated with Syncfusion.

Answer №5

Dealing with the same issue, I discovered that the PDF converter struggles when dealing with flex and grid layouts. Consider opting for tables over columns and rows if you run into this problem.

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

What is the reason behind text underline being disabled when using "hidden: overflow" in CSS?

I have a long text string that I want to auto-shorten using CSS with text-overflow: ellipsis, but it's removing the underline from my link. Here is the code: NORMAL .link { font-weight: bold; cursor: pointer; color: black; text-decorat ...

css

The toggle feature in jQuery doesn't hide content in the same manner as it was originally shown

Just diving into the world of jquery and I'm experimenting with the toggle function to display and hide a div, along with adding or removing an active class. http://jsfiddle.net/MAkyw/ I've encountered 2 issues: 1) The 'active' class ...

jqueryhtmlcss

In Firefox 50.0, the button's resizing feature causes the parent div container outline to adjust size

I am currently working on developing a responsive design with the feature of having a button that appears to "float" under a div element. My desired outcome is achieved in Opera and Chrome: https://i.sstatic.net/Vm55V.png In Firefox, the result is not as ...

htmlcssfirefoxflexboxoutline

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss

Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...

javascripthtmlcss

Having trouble with jQuery field validation not functioning as expected?

I'm trying to implement user input validation when the submit button is clicked, but I can't seem to get it to work. Using jQuery $(document).ready(function() { function validateForm() { if ($('#u').value() == '') ...

jqueryhtmlvalidation

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

cssvue.jsflexboxvuetify.js

How can we stop every tab pane in (bootstrap five) from sharing the same scroll position? Each tab is currently synchronized with the scroll position of the others

In Bootstrap 5, the scroll position remains the same when switching between tabs in the tab pane. Whether moving from tab #1 to tab #2, both tabs are at the identical scroll position, failing to preserve each tab's specific location. <div class=&qu ...

javascripthtmljquerybootstrap-5

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

htmlcsssvgcss-shapes

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

[Help needed! I am trying to store the marks, id, and name values of each cell in objects of an array. However, I am not getting the correct answer. Can someone guide me on how to properly store the marks and id of each cell in objects of an array? const [ ...

javascripthtmlreactjsmaterial-uimaterial-table

Customize the size of innerWidth and innerHeight in your THREEjs project

Is there a way to customize the size of the window where this function launches instead of it automatically calculating the height and width? I've attempted to modify this section of the code, but haven't had any success so far: renderer.setSiz ...

javascripthtmlthree.js

What is the method for displaying text and icons as black in a sticky header design?

Having trouble making the menu text and icons in the sticky header black on my website. I've been searching for the correct class in the CSS styles, but haven't been able to find it. I tried using this CSS: .header-wrapper .stuck { color: #000 ...

csscolorsheader

Unlock the Potential of Spring REST-JWT-JavaScript for Seamless Transitions

In my Java Spring REST back-end, I am implementing a security feature using Json Web Tokens instead of sessions. For the front-end, I plan to use JavaScript and jQuery for sending requests to the back-end, along with HTML. After a successful login, I stor ...

javascripthtmlspringrestjwt

Complications arising from IE when using strict doctype with CSS and jQuery

Here's the code I'm using for a sliding caption effect on my gallery site: I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible). $('.boxgrid.caption').hover(function(){ $(".cover", th ...

jquerycssinternet-explorer

Javascript clock problem, kick off on click

Currently working on a game and in need of a counter that starts when clicked and stops at 00 (From 1m to 00). It is currently starting onload and cycles back to start when it reaches 00. HTML: <body> <div> <div class="timer" >Battle t ...

javascriptjqueryhtml

Guide to displaying Fontawsome icons with CSS2D Renderer/Object

I am trying to display the map-marker-exclamation icon from the FontAwsome library on top of a three.js cube, but unfortunately, the icon is not rendering properly. Can someone guide me on how to successfully render a FontAwsome Icon using three.js? Thank ...

cssthree.jsfont-awesome

Ways to prevent a number input from deleting the initial 0 in a number

When making card payments, please note that we require a 3-digit security code. In certain cases, especially on older versions of Internet Explorer, there have been instances where codes starting with a 0 (e.g. 012) had the first 0 removed, resulting in o ...

html

What is the best way to display all values in the class when no selection is made in the drop-down menu?

I need assistance as I am facing an issue where all files are not appearing at the same time. It seems that the problem lies with the year option in my code. The year option requires at least one year to be chosen for it to work properly. I want to impleme ...

htmldrop-down-menu