I started by getting a printable format for the webpage which was not that difficult, just removing some classes and adding some css with Jquery.
Now came the fun part.
What if i could do all of this on the client side, using JavaScript.
Imagine you're the server and your project manager is the browser. What a fine day it would be when a project manager interrupts you with something he/she could do.
Moreover i would save some cpu cycles on the server and learn something new in the process.
So with the help of stackoverflow my journey began.
What do i need :
- Something to generate PDF in JavaScript -I came across jsPDF it has a very simple API and is really simple to use.
- Now i need something that can make like a screenshot of the element . Again with the help of StackOverflow i came across - html2canvas .
Using both together is really simple
html2canvas($("#canvas"), { onrendered: function(canvas) { var imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('p', 'mm'); doc.addImage(imgData, 'PNG', 10, 10); doc.save('sample-file.pdf'); } });
From post at stackoverflow.com
I do recommend taking a look at the of jsPDF Examples
If your files are coming out a bit on the large size you may also compress it -jsPDF constructor has a flag to enable compression. My pdf came from about 14 megs to 240kb.
The trickiest bit happens when your image is bigger than a page. In that case you must treat your image like a sliding window, effective splitting the image through several pages. A good example code can be found on
Hopefully you find this useful, i have tried to gather most of the sources i went through to learn.
Credit to the devs @ stackoverflow .
And thanks to those that :
