Skip to main content

HTML to PDF Common Issues

HTML to PDF Common Issues

Generated PDF contains Overlapped Elements

PDF.co uses chromium engine to render HTML to PDF. Hence, Whatever output you get when viewing HTML in browser print mode, the same should be resulted when using PDF.co HTML to PDF.

But sometimes, browser print output looks perfectly fine, but PDF.co output PDF is not looking the same and might have overlapped elements.

If you are facing these issues, please inspect your HTML for the following scenarios.

  1. Try to avoid usage of css properties with relative size units such as vh, rem, etc. For example, If you are using the following code.

    .pdf-page {
    height: 100vh;
    page-break-after: always;
}

    Consider replacing it with the following.

    .pdf-page {
    width: 100%;
    page-break-after: always;
}

  2. HTML should not contain locally referred resources. This is one of the common mistakes that developers might forget to replace local resource references such as js, css, images, fonts with publicly accessible URL/CDNs.

Orientation property is not working

Sometimes Orientation mode “Landscape” does not seem to work. Main reason here might be that HTML contains <style> elements which overrides our HTML engine.

If we cleaned up the unwanted tags, it should produce a Portrait as well as Landscape results.

This mostly happens when HTML is generated from Microsoft Outlook, or other HTML exporter tool.

HTML with <style> tag, which causes error

<html xmlns:v=3D"urn:schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-micr=
osoft-com:office:office" xmlns:w=3D"urn:schemas-microsoft-com:office:word" =
xmlns:x=3D"urn:schemas-microsoft-com:office:excel" xmlns:m=3D"http://schema=
s.microsoft.com/office/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-html=
40"><head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
2">
<meta name=3D"Generator" content=3D"Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:#0563C1;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:#954F72;
    text-decoration:underline;}
span.E-mailStijl17
    {mso-style-type:personal-compose;
    font-family:"Calibri",sans-serif;
    color:windowtext;}
.MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
@page WordSection1
    {size:612.0pt 792.0pt;
    margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
    {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext=3D"edit">
<o:idmap v:ext=3D"edit" data=3D"1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=3D"NL" link=3D"#0563C1" vlink=3D"#954F72">

Cleaned HTML from <style> tag, which fixes error

<html xmlns:v=3D"urn:schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-micr=
osoft-com:office:office" xmlns:w=3D"urn:schemas-microsoft-com:office:word" =
xmlns:x=3D"urn:schemas-microsoft-com:office:excel" xmlns:m=3D"http://schema=
s.microsoft.com/office/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-html=
40"><head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
2">
<meta name=3D"Generator" content=3D"Microsoft Word 15 (filtered medium)">
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext=3D"edit">
<o:idmap v:ext=3D"edit" data=3D"1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=3D"NL" link=3D"#0563C1" vlink=3D"#954F72">

Cleaning <style> tags using profile parameters

Use profile params removeHTMLHeadStyleTags and removeHTMLBodyStyleTags to remove css styles from html head and body tag respectively.

"profiles": "{ \"removeHTMLHeadStyleTags\":\"true\", \"removeHTMLBodyStyleTags\":\"true\" }"

Repeated background filled blank page or section when using screen mode

Normally we do HTML to PDF in print mode. This is similar to when we print in the browser. In print mode it uses print mode css.

When we specifically want to use css and all effects from screen mode, we can use the following profile settings.

"profiles": "{\"mediaType\":\"screen\"}"

For websites which contain information blocks of specific size and have page level background; when we do HTML to PDF with screen mode there are chances that we have repeated blank pages filled with page background.

This happens because the PDF page breaks after the end of the block, but since we have added page level background; it'll fill the rest of the page with background image/color.

This issue has a common solution, which is to specify custom paper size as per information block size.

For example, if we have an information block of size 625x880px, we can specify profile settings like below.

"profiles": "{\"paperSize\":\"625px 880px\", \"mediaType\":\"screen\"}"
Was this article helpful?