4

I am new to Javascript / jQuery and am looking for a way to add a button to a page that allows the user to create a pdf from a pre-defined form or div (e.g. by adding a class).

I did some research but could not find a way to do this in JS or jQuery.

Is there a way to realise this on client side via Javascript / jQuery or can someone tell me a freeware plugin that supports this ?

The only plugin I found is TCPDF but this seems to be pretty large and I did not see a way there where I can limit this to a certain form or div on a page (instead of printing the whole page).

Note: I do not need to cover images, just plain HTML like form fields or tables and text.

Many thanks in advance for any help with this, Mike

keewee279
  • 1,656
  • 5
  • 28
  • 60

3 Answers3

4

you could try with jsPDF

it's free and client side.

You can see from their 'HTML Render' example that you can create a PDF from a portion of your HTML

EDIT

Probably jsPDF doesn't support CSS

If you need it, you could try as an alternative phantomJS, but it's a command-line tool and it captures a web page as a screenshot. Not sure if that's what you're searching for

Moppo
  • 18,797
  • 5
  • 65
  • 64
  • Thanks a lot - I'll have a look. – keewee279 Jun 04 '15 at 09:13
  • I checked their site and went through the documentation there (http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html) but could not find an example to limit this to a certain element. Can you provide a link for the HTML Render example or post it here ? – keewee279 Jun 04 '15 at 09:21
  • Update: I found the answer on the following post BUT the problem here is that this also says you lose all your own CSS styles which is something I would need to keep: http://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript - Thanks anyways. – keewee279 Jun 04 '15 at 09:23
  • 1
    you can see from their "HTML Render" example that `doc.fromHTML` takes an id of an element as a source – Moppo Jun 04 '15 at 09:28
  • Thanks for this but I would still lose my CSS styles here, right ? – keewee279 Jun 04 '15 at 09:38
  • 1
    Thanks for this as well. This is not the right tool for my purpose but I found the answer myself (see below). – keewee279 Jun 04 '15 at 09:53
2

also a good one and simple is pdfmake

it is simple and clean library to create a pdf from HTML and you can decide to print it or not later ,

a sample of basic usage below 

    var docDefinition = {
    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
};

var pdfDoc = printer.createPdfKitDocument(docDefinition);
pdfDoc.pipe(fs.createWriteStream('pdfs/basics.pdf'));
pdfDoc.end();
Ali
  • 1,080
  • 16
  • 22
1

As in a previous answer I recommend to use tiny but powerful and safe js library Print.js

Example:

 <form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

pretty easy

Nikolay Bronskiy
  • 843
  • 11
  • 19