4

I am looking for a JavaScript or PHP plugin/library to convert a beautifully designed website (using CSS) to PDF file.

To clarify further, I need to convert the HTML-CSS output on the webpage to PDF file. I found some interesting plugins related to JavaScript like jsPDF but it only converts HTML to PDF, ignoring CSS. Which is not what I want.

Some points:

  • The generated PDF file should have output of both HTML and CSS.
  • Should work on both Mac and Windows.
  • Should work on latest version of Chrome and Firefox.

PS: The elements are being added dynamically using JavaScript. Suppose a scenario where there are lot of different styled sections. User can add or remove those styled sections, and later he/she can press on a button "create as PDF".

8
  • Not what you want, but the least effort solution if to use the browser's print menu to "print to PDF"
    – Mawg
    Commented Sep 6, 2016 at 11:23
  • 1
    @Mawg I can't say users to do that steps manually. So, looking for solution through JS or Php.
    – Mr_Green
    Commented Sep 7, 2016 at 9:49
  • Then why not Google for js pdf screenshot? For instance, this looks helpful ... stackoverflow.com/questions/5621907/… of course, I have only grazed here, and not verified that it is is PDF and not PNG or JPEG, which is why this is a comment, and not an answer. But surely you are not inventing an entirely new wheel?
    – Mawg
    Commented Sep 7, 2016 at 10:10
  • There is an excllent article explaining how to do so at techumber.com/2015/04/…
    – Mawg
    Commented Sep 7, 2016 at 11:51
  • See also stackoverflow.com/questions/4912092/…
    – Mawg
    Commented Sep 7, 2016 at 11:53

3 Answers 3

2

WeasyPrint

Free (under a BSD license) and open-source solution helping web developers to create PDF documents. It turns simple HTML pages (with CSS, SVG and so on) into PDF format. It aims to support web standards for printing.

html-pdf (npm)

You can use NodeJS html-pdf npm package (see GitHub, install via: npm install -g html-pdf). Sample shell command-line:

html-pdf http://example.com/ example.pdf

PhantomJS

Use PhantomJS with rasterize.js, Sample command-line:

phantomjs rasterize.js http://example.com/

wkhtmltopdf

Use wkhtmltopdf (see: GitHub page) command-line tool to convert the website into the PDF page.

2

PhantomJS, which is an excellent headless browser, great for development porpoises, says

Since PhantomJS is using WebKit, a real layout and rendering engine, it can capture a web page as a screenshot.

and

Beside PNG format, PhantomJS supports JPEG, GIF, and PDF.

It is really simple to use. Here's some sampel code for captureing as .PNG

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});
4
  • I tried converting softwarerecs.stackexchange.com/questions/35963/… but it guts left edge and the questions on the right are not present. It does have clickable links so yay!
    – cybernard
    Commented Feb 4, 2017 at 18:01
  • If it doesn't work, why say "yay"? I am confused
    – Mawg
    Commented Feb 4, 2017 at 18:05
  • 1
    because at least the links are clickable. Many other products are not.
    – cybernard
    Commented Feb 4, 2017 at 18:09
  • At this point, I can't recommend anything else, but if you post your code to stackoverflow.com you should get some help there
    – Mawg
    Commented Feb 4, 2017 at 18:11
2

This question asks Is it possible to capture or print what's displayed in an html canvas as an image or pdf? and the answer by @lepe, who seems to know what he is talking abbout, with 13.6k rep, which has 16 upvotes, says

I would use "wkhtmltopdf". It just work great. It uses webkit engine (used in Chrome, Safari, etc.), and it is very easy to use:

wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf

That's it!

Try it

The recommendation is endorsed by Mr JavaScript, who sounds like he knows what he is talking about.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.