HTML to PDF Conversion Frequently Asked Questions

Technical Questions

How to solve any problem!
The best thing to do if you get a bad request or the PDF doesn't look how you expect, (e.g. css page breaks are not in the right spot or the or the layout is a little out) is to strip back your page to a minimum (perhaps comment out the css or js links) and see if that converts, then progressively add stuff back in to you find the cause of the issue.
What about security (and also testing on localhost) - do I have to make my webpage publically available?
No - you can send the html (instead of a url) - there is no need to put the page you want to convert publically on the web. This is also slighly faster as we don't have to download the webpage from the internet.
If I do use the URL option, what security options like SSL are there?
You can use basic authentication and pass in a username and password. Our API supports SSL and also reading from https pages. Alternatively some customers use a simple token system, e.g. by passing a secret parameter on the url that noone else will know, e.g. www.myurl.com/invoice?secret=abc123. The token could be simple - the same each time, or it could be time based and expire after a minute or so.
If I get a bad request when doing a page, what could that be?
The most common reasons are
  1. You are trying to make our API access your local computer, e.g. localhost, which isn't publically accessible yet. You can pass the HTML instead of the URL if you prefer.
  2. The HTML (or perhaps css) contains a link to an external file, for example an image, that doesn't exist. Obviously we will try to download the non-existant file which adds to processing time. Press F12 in your browser and take a look at it in console window -- fix most, if not all of the errors in your page.
  3. Your HTML is complete nonsense. Most of the time we will still be able to generate something anyway, but garbage in garbage out. Run your page through The W3C Validation Service
  4. You are connecting to an HTTPS page, and you are also trying to reference insecure http resources - not good practise anyway - but it's possible this could be the source of an error.
  5. The conversion times out because your page has too complex css. This is is a bit rare but rounded corners with gradiated colours or rounded corners on background colours etc arn't loved performance wise. Use a print stylesheet or simplified css and your conversion will go much quicker.
  6. You are sending HTML rather than urls, and you have a relative reference to a picture or font in your HTML - (e.g. /img/mypicture.jpg instead of http://mysite/img/mypicture.jpg) -- we have no idea where /img/mypicture is stored so use a full http reference to somewhere we can download it from and we will download and embed it in the PDF automatically
Can I create a PDF from google charts API
Yes - you may need to change how you load the google charts library. Using <script src="http://www.google.com/jsapi"></script> instead of <script src="http://www.gstatic.com/charts/loader.js"> may fix the issue
Can I make my pdf convert faster?
Yes, most PDF's generate in a few milliseconds and complex css is often the reason you will experience a slower convert than other people. Try commenting out the links to your css and check the speed. If if's fast then the issue is in your css and easy to solve in a few minutes.. just progresively add back the css until you find the offending bit and then create an overriding class (or use a print stylesheet) to remove the effect. For example, I'm advised adding an override like this for bootstrap.css improves the conversion speed significantlly.
            @media print {
                * {
                    color: #000 !important;
                    text-shadow: none !important;
                    background: transparent !important;
                    box-shadow: none !important;
                }
                table {
                    border-collapse: collapse !important;
                }
                table-bordered th, table-bordered td {
                    border: 1px solid #ddd !important;
                }
            }
            
It isn't strickly necessary, but most people following good practise use a print stylesheet, and try to keep things simpler e.g. don't use the full bootstrap.css for a simple invoice!). Alternatively I can put paying customers onto a faster server or even a dedicated virtual machine easily enough, contact me.
Does your system support Chinese, Korean or Japanese characters? Characters don't show up in the page.
Yes it does. Make sure you have a meta code for utf in the header element, and that your fonts etc are loading correctly. If in doubt, create a sample test page just with the fonts and check it renders. If it doesn't let me know, if it does, progressively add code back into your page.. you will most likely find you have an error somewhere else causing the issue.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
What are the valid page sizes?
A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 B0 B1 B1 B2 B3 B4 B5 B6 B7 B8 B9 C5E Comm10E DLE Executive Folio Ledger Legal Letter Tabloid
How can I control the page size?
You can use the PageWidth and PageHeight parameters - note you must use both parameters at once.
My header or footer isn't showing?
By default the page margins are zero millimeters. So, try increasing the margins to make space for a header and footer. Also, if you are using a link to an HTML file for a fully customisable header/footer, make sure your file includes a doctype tag at the top.
How to add page breaks into my PDF
Use css - something like
            @media print {
                footer {page-break-after: always;}
            }
            
Also make sure you don't have this sort of thing happening which will stop page breaks from working
            body {
                overflow: auto !important;
            }
            
How to use Google web fonts?

For example, to use Jolly Lodger, reference the font as follows:

In css:

            @font-face {
                    font-family: 'Jolly Lodger';
                    src: url(fonts.googleapis.com/css?family=Jolly+Lodger);
            }
            p {
                font-family: 'Jolly Lodger';
            }

            
In HTML:




            

Service Questions


Get Started
Please help us by spreading the word