How to put and download the content of a div in html into pdf file using JS?

Question

I need to put the content of a div into a pdf file then download it. I've searched a bit and I found that you can use javascript to do this via jsPDF.

I found this sample code but it seems that it doesn't work for me. When I click the generate pdf button nothing happens. I am also using codeigniter for my framework and my website is currently uploaded in 000.webhost.com.

 <div id="content"> <h3>Hello, this is a H3 tag</h3> <p>a pararaph</p> </div> <div id="editor"></div> <button id="cmd">generate PDF</button> <script type="text/javascript"> var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () { doc.fromHTML($('#content').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); }); </script>

Scott · Accepted Answer · 2014-12-08 19:03:49Z

1

Works for me on JSFiddle.net: http://jsfiddle.net/scottcanoni/h3Lb05wa/

What error are you getting on your website?

All I am including is jQuery and the jsPDF script:

<script type="text/javascript" src="https://parall.ax/parallax/js/jspdf.js"></script>

If you include both jQuery and jsPDF in your <head> tag, you should be fine with the code provided.

edited Dec 8, 2014 at 19:03

answered Dec 8, 2014 at 17:01

Scott

3,7712 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Justin Francis Toral Over a year ago

there's no error. nothing happens when I click the generate pdf in my website. did you need to download the /parallax/js/jspdf.js ? I am a bit confused in where should I put jspdf js files in my document. I decided to put it together with my views. is that ok?

Scott Over a year ago

I updated my answer. You need to include the jsPDF in between the <head></head> tags on your page. Make sure it is there. Alternatively, you can download the JS and serve it from your own domain.

Justin Francis Toral Over a year ago

yeah. I have included it. should the js files be in the same folder as the views? (using codeigniter as framework)

Justin Francis Toral Over a year ago

I've managed to make it work but I have a new problem. I can't seem to work it with the contents of a div that has tables.

Justin Francis Toral Over a year ago

it's output in the pdf file is like this Copyright Pechay Productions 2014 ID Type Name Owner Contact # Address Accreditation Status 1 Apartment Nicoles Apartment It should be align horizontally.

|

Craig · Accepted Answer · 2014-12-08 16:56:09Z

0

Are you using JavaScript for a reason? I would (and have) use DOM PDF;

https://github.com/dompdf/dompdf

https://github.com/bcit-ci/CodeIgniter/wiki/PDF-generation-using-dompdf

answered Dec 8, 2014 at 16:56

Craig

1,8211 gold badge11 silver badges12 bronze badges

1 Comment

Justin Francis Toral Over a year ago

could you create a simple code using the dom pdf? I can't understand it. I tried using the js because it's easy to understand and it is in the html file.

Collectives™ on Stack Overflow

How to put and download the content of a div in html into pdf file using JS?

2 Answers 2

7 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Linked

Related