Convert HTML + CSS to PDF with nodeJS or Javascript?

Question

I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.

I's tried with "html2pdf" , "pdfmake", "jspdf"..

PDFMake does not help me because it need to generate a JSON with HTML data...

The structure of file that I would like to convert to PDF is:

• html : www/templates/phase_one_report.html
• css : www/css/phase_one_report.css

Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.

Sorry about my english.

Answer 1

This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.

The best solution I have found is not Javascript at all: wkhtmltopdf . This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.

You mention that you're using node.js , but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html . The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.

For example:

import { exec } from 'child_process';

// generate the report

// execute the wkhtmltopdf command
exec(
    'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
    (error) => {
        // send the PDF file to the client
    }
);

There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.

If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.

Answer 2

There are a number of options available right now:

Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.

wkhtmltopdf as mentioned before does the job but is slightly outdated.

You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.

Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.

However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.

If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service

This list is possibly incomplete and will change a lot in the near future.