I faced a situation where I need to capture a part of a html page and embed that image in the pdf.
I used wkhtmltopdf convertor for one of my project, where I used visjs js plugin, While generating a pdf there was some performance issue to render the timeline in the pdf.

Screen Shot 2015-07-01 at 8.57.29 pm

So we thought of taking a snap of the timeline in the preview page and save it as an image and embed that image in the pdf, Which saved us lot of time and worked like a charm also improved the speed while generating pdf.

Html2canvas

I used html2canvas js library which helps to take screenshots of webpages or capture part of a webpage.
I captured a part of a webpage which is the timline and pushed it to the server via ajax and later while creating the pdf embed the image in the html instead of directly rendering the timeline library.

How it works ?

It don’t actually take screenshots, It gathers information on all the elements there, which it then uses to build a representation of the page, So the screenshot may not be accurate, its clearly mentioned in their website itself, but in my case it worked fine may be vis js uses all css which this plugin understands.

Here is the screenshot taken using html2canvas
Screen Shot 2015-07-01 at 7.57.24 pm

Code snippet

Advertisements