Convert HTML + CSS to PDF with nodeJS or Javascript? - Stack Overflow

admin管理员组

文章数量:1425741

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.

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.

• javascript
• html
• css
• node.js
• pdf

Share Improve this question Follow edited Dec 15, 2016 at 16:17 oihi08 asked Dec 15, 2016 at 16:03 oihi08oihi08 73511 gold badge77 silver badges2020 bronze badges 4

• 1 Is your css file included in the html file? Can you provide some example (image) of how it does not work? What do you mean by "PDF is invalid"? Do you mean the style is messed up? – Alic Commented Dec 15, 2016 at 16:12
• have you tried link? – Mntfr Commented Dec 15, 2016 at 16:12
• @ZichenJiang I sais "PDF is invalid" because it hasn't got styles. I have a button in phase_one_report.html that it should generate PDF – oihi08 Commented Dec 15, 2016 at 16:14
• @Mntfr but it is a program, no? I have a button in my HTML that it should generate PDF – oihi08 Commented Dec 15, 2016 at 16:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./msokk/electron-render-service

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

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 mand
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 mand-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 bees a little more plicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.

本文标签： Convert HTMLCSS to PDF with nodeJS or JavascriptStack Overflow