Troubleshooting HTML to PDF

Occasionally the HTML to PDF converter can produce results that are different than a regular browser. Here are common scenarios that cause such difference and how to resolve them.

Use Google Chrome to verify the HTML first

Internally EO.Pdf runs a browser engine based on Google's Chromium project, which is the same browser engine that powers Google Chrome browser. Since different browser can render the same HTML differently, HTML that renders "perfect" in another browser such as IE may not render the same in Google Chrome or EO.Pdf. As such make sure you verify your HTML in Google Chrome browser first. If Google Chrome does not render "correctly", then you will need to adjust your HTML to have it render correctly in Google Chrome first.

The page appears to be only half loaded and is missing contents

Please check the following:

  • The most common reason for this is because your code loads contents with JavaScript and the JavaScript did not finish running before the conversion starts. To resolve this issue, you can try to increase HtmlToPdf.Options.MinLoadWaitTime. Alternatively, you can use manual trigger;
  • This problem can also occurs if there is an error in JavaScript code. You can try to troubleshoot your JavaScript code either by loading/debugging the page in a regular browser, or use EO.Pdf's debug console to see if you can find any error message there;

The page layout seems to cramped together instead of neatly laid out as in a browser

Please try to set HtmlToPdf.Options.ZoomLevel to a value smaller than 1. By default the pixel width of a PDF page is much smaller than the pixel width of a typical browser window. As such a page that is optimized to a wider browser window may not display correctly when the window is much narrower. You can verify if this is the problem by loading the page is a regular browser, then reducing the browser window size considerably and see if you observe the same cramped layout in the result PDF file. If this is the case, a smaller ZoomLevel will have the effect of increasing the PDF page's pixel width thus results in the intended layout;

The page loads all the contents but seems to be missing CSS styles

The most common reason is because the CSS requires authentications. EO.Pdf can authenticate with your server but it does not share the same authentication session with your client browser. So having authenticated with the server through your browser would have no effect on EO.Pdf. For most cases, CSS does not need to be authenticated, as such you may want to remove authentication requirement for CSS resources, or you can use one of the supported method to authenticate EO.Pdf with your server.

The page takes unreasonable long to convert, or times out completely

The most common reason for this is DNS issue. See here for more details.

Note that reasons listed under one scenario can occurs for other scenarios as well. For example, a JavaScript error may cause the page to appear as if CSS is not loaded. So it is always recommended to check all of them.