Javascript: How to create pdf file from HTML form or div

Question

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

Solution 1

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

Solution 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();

Solution 3

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

Comments

[keewee279]

Thanks a lot - I'll have a look.

[keewee279]

I checked their site and went through the documentation there (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]

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: stackoverflow.com/questions/18191893/… - Thanks anyways.

[Moppo]

you can see from their "HTML Render" example that doc.fromHTML takes an id of an element as a source

[keewee279]

Thanks for this but I would still lose my CSS styles here, right ?

[keewee279]

Thanks for this as well. This is not the right tool for my purpose but I found the answer myself (see below).

[gom]

But print.js is for printing, not for generating pdf.

[Nikolay Bronskiy]

you can use 'Save as PDF' browser printing option