Example

Styling and Layout Capabilities Offered in an HTML to PDF API

Learn what parameters you can customize using an HTML to PDF API: HTML to PDF footer on every page, page brakes, margins, crop marks, and more.

Companies that generate PDF files for end-users and record-keeping deal with different kinds of reports. These are electronic invoices, medical test results, copies of customer communications, and many other PDF documents. Multiple types of PDFs are also used within a single company and are additionally customized.

Therefore, every business using HTML to PDF conversion depends on the document formatting capabilities of their software. The more you can customize styling and layout, the more flexibility you have in terms of PDF reports.

An HTML to PDF API connected to your system allows you to generate custom documents programmatically on a large scale. HTML to PDF APIs include extensive styling and layout capabilities for automated customization of generated PDFs. By changing several values, developers can configure the look and functionality of the final PDF. You get a chance to add an HTML to PDF footer on every page, insert an image file, configure headers and footers, etc.

Find out more about the styling and layout capabilities available in HTML to PDF APIs here. We will also explain how to add a logo to PDF, include an HTML to PDF footer on every page, and give other tips.

Why Do You Need Formatting Capabilities in HTML to PDF Conversion Software?

Despite being used in many web solutions, HTML to PDF conversion may be difficult to run properly. Developers working on such software often face formatting issues, lose information in the course of the conversion, and have other problems. For example, the configuration of HTML to PDF footer on every page is one of the common challenges. Page numbers, image files, logos may also result in messy final PDF files.

HTML to PDF APIs with styling and layout enables you to prevent conversion issues from the start. You get the means to set up PDF generation rules and avoid troubleshooting. Apart from facilitated software development, HTML to PDF APIs with customizable document parameters bring other opportunities:

• Smoother web pages to PDF conversion. When you configure formatting settings, the chance of document conversion issues is much lower. You can then create PDFs in large volumes without serious issues.
• Higher accuracy of reports. When layout problems occur, some source information may be lost. The generated PDF sometimes does not display images, logos, or text pieces. An HTML to PDF API with formatting capabilities allows engineers to troubleshoot such issues for more accurate document conversion.
• Enhanced record-keeping and compliance. Reliable HTML to PDF rendering enables you to store copies of HTML source data automatically. You don’t have to worry about losing some details during document conversion and related compliance issues.
• Increased document rendering flexibility. HTML to PDF APIs with layout settings allow you to quickly change the format of documents and create new types of reports. It’s a considerable advantage if your company handles multiple types of documents and frequently updates their format.
• Better user experience. Even if mistakes in documents don’t disturb you, they can irritate your customers. An electronic invoice with missing fields or a distorted logo affects their experience. Therefore, using converters with advanced styling capabilities increases the quality of your customer communications and overall brand image.

The listed advantages make companies prefer HTML to PDF conversion software with formatting capabilities. By adding such HTML to PDF APIs on top of their current systems, they can leverage a complete set of PDF styling and layout features.

Источник

Using Flex/CSS with wkhtmltopdf

I have a need to create a PDF with this data and I’m using wkhtmltopdf (https://wkhtmltopdf.org/) which also works fine however the PDF generated has all my List Items in 1 long column instead of 3 per row.

Looks like the CSS is not being processed when the PDF generation is happening any insight is appreciated.

Solution – 1

Try to decrease the width of the flex columns. For example when I tried to make 50/50 columns I had to put a width of 49.8% instead of 50%. Hope it helps.

Solution – 2

.row < display: -webkit-box; /* wkhtmltopdf uses this one */ display: flex; -webkit-box-pack: center; /* wkhtmltopdf uses this one */ justify-content: center; >.row > div < -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; >.row > div:last-child

Solution – 3

I used autoprefixer in my application to automatically add prefixes. You just need to update browsersList with ie >= 9 .

Solution – 4

To use flex or boxes while converting to pdf, You need webkit
Example:-

display: flex; display: -webkit-flex; 

for justify-content and align items you have to use

-webkit-align-self: flex-end; align-self: flex-end; webkit-justify-content: space-between; justify-content: space-between; 

Solution – 5

I resolved this issue using:

equivalent of display:flex; ==> display: -webkit-box;

equivalent of justify-content: space-between; ==> -webkit-box-pack: justify;

Solution – 6

As fix for Bootstrap 5, working with wkhtmltopdf 0.12.*, I found and completed the following style

  /* Fix wkhtmltopdf compatibility with BS flex features */ .row < display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; >.row>div < -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; >.row>div:last-child < margin-right: 0; >/* Fix wkhtmltopdf compatibility with BS tables borders */ /* Requires cellspacing="0" on table to prevent spacing */ table < border-collapse: separate !important; >th, td 

source saved my day while upgrading from bs 4 to bs 5.

Solution – 7

Источник

Flexbox suport in pdfHTML

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is currently in the W3C’s candidate recommendation stage, although has been around for a number of years now and has proven to be popular since it’s a simple, reliable, and fast solution with wide browser support. The flex layout allows responsive elements within a container to be automatically arranged depending upon the screen size.

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using floats or positioning. You can refer to A Complete Guide to Flexbox for more details, such as all the different possible properties for the parent (flex container) element and the child (flex items) elements. There are also many useful resources there including history, demos, patterns, and a browser support chart.

In pdfHTML 3.0.4 we’ve added initial support for the flexbox framework. The support of all flexbox properties is not comprehensive yet, however, it can already handle a lot of use-cases.

Reminder

All you need to do to convert the HTML code below into PDF, is run one of the methods from the HtmlConverter class in Java or .NET, e.g.

Example

In the following example, we’ll use the following HTML code for a pretty common use-case — the creation of a two-column layout stretched to the full width of the page.

    * < font-family: Arial; >p < font-size: 14px; line-height: 127%; text-indent: 20px; >.bordered < border: 1px dotted lightgray; padding: 10px; box-sizing: border-box; >.header < width: 100%; flex: 1 0 100%; >.blue-column < background-color: #ffeeee; >.green-column < background-color: #eeffee; >/*flex related part*/ .flex-container < display: flex; flex-direction: row; width: 100%; >.flex-column-item  
 
 
Chapter One
 
.
 
Low Key, who was a grifter from Minnesota, smiled his scarred smile. "Yeah," he said. "That's true. It's even better when you've been sentenced to death. That's when you remember the jokes about the guys who kicked their boots off as the noose flipped around their necks, because their friends always told them they'd die with their boots on."
 
"Is that a joke?" asked Shadow.
 
 
 
"Damn right. Gallows humor. Best kind there is."
 
"When did they last hang a man in this state?" asked Shadow.
 
"How the hell should I know?" Lyesmith kept his orange-blond hair pretty much shaved. You could see the lines of his skull. "Tell you what, though. This country started going to hell when they stopped hanging folks. No gallows dirt. No gallows deals."
 
 
  

These styles define the flexbox-related behavior.

.flex-container < display: flex; /* pdfHTML does not support inline-flex yet*/ flex-direction: row; /* items must be placed in a row */ width: 100%; >.flex-column-item< flex-grow: 1; /*the remaining space in the container will be distributed equally to all children*/ flex-shrink: 0; /* no shrink of the items*/ flex-basis: 40%; /*default-width for an element */ >

As you can see, the flex columns s tretch to the full width of the page, regardless of their width.

Justify-content property.

Sometimes it may be necessary to keep their initial width (40% in our case).

In that case, you may also want to specify their positioning. This can be done using the justify-content property.

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size

pdfHTML 3.0.4 supports the following values : start , end , flex-start , flex-end , left , right , and center .

To do this, we’ll need to adjust our styles.

.flex-container < justify-content: flex-end; /* columns will be placed at the right border of the container as our direction is left-to-right*/ . >.flex-column-item< flex-grow: 0; /* children`s width won`t be enlarged*/ . >

As a result, we now have two columns placed at the right border of the page.

Источник

HTML to PDF converter for your React Application

Here, I’ll show you how to use jsPDF (html to pdf converter) in your React application which supports all modern CSS including flexbox.

Consider the below one as your sample App component.

import React from 'react'; const App = () => < return ( 
Hello World
 
 ); > export default App; 

Now, install jspdf library by using the below command.

Then, you can import jspdf in the App component.

Now, I’m going to replace my JSX with the below code.

  
>>Testing html to pdf converter 
 

Here, I have added a div with the id “pdf-view” so that I can convert all content inside this specific div into pdf. Now, I’m going to add a button below the div.

Clicking on the button invokes the below function

Here, I make use of jspdf library to convert all content inside the div (with id pdf-view) into pdf and save it as test.pdf. You can find all the properties of jsPDF here. By clicking on the button you can see the below pdf opened in a new tab.

Final Code

import React from 'react'; import < jsPDF >from "jspdf"; const App = () => < const pdfDownload = e => < e.preventDefault() let doc = new jsPDF("landscape", 'pt', 'A4'); doc.html(document.getElementById('pdf-view'), < callback: () => < doc.save('test.pdf'); >>); > return ( 
>>Testing html to pdf converter 
 >Download as pdf 
 ); > export default App; 

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexbox layouts don’t work #24

Flexbox layouts don’t work #24

Comments

I am using Stylus to generate the CSS for my web page. When I enable flexbox layout (flexbox=true), nothing is rendered by node-html-pdf, but Chrome displays the page fine. When I disable flexbox layout, node-html-pdf and Chrome render the same output.

The text was updated successfully, but these errors were encountered:

@Lichtjaeger thanks for the hint.
I’ll integrate phantomjs 2 in this module as soon as it’s stable on all platforms. That’s also the case for the phantomjs module on npm. So we can simply switch the npm module.
Until then you can use the phantomPath config option and use your locally installed phantomjs 2.

Yes, I can confirm that it works when I install 2.0 and set the phantomPath option to point to the new location

On Apr 20, 2015, at 2:39 AM, Marc Bachmann notifications@github.com wrote:

@Lichtjaeger thanks for the hint.
I’ll integrate phantomjs 2 in this module as soon as it’s stable on all platforms. That’s also the case for the phantomjs module on npm. So we can simply switch the npm module.
Until then you can use the phantomPath config option and use your locally installed phantomjs 2.

—
Reply to this email directly or view it on GitHub.

@jdidion hey how to install phantomjs 2? , i cant find a npm package for this

@ripper2hl you have to install the binary yourself. You can use apt-get install , brew or a docker container.

html-pdf@2.0.0 now uses phantomjs v2. Have fun

On Feb 16, 2016, at 5:41 PM, Marc Bachmann notifications@github.com wrote:

html-pdf@2.0.0 now uses phantomjs v2. Have fun

—
Reply to this email directly or view it on GitHub #24 (comment).

Источник