I have a content div with the id as “content”. In the content div I have some graphs and some tables. I want to download that div as a pdf when user click on download button. Is there a way to do that using javascript or jQuery?
I have a content div with the id as “content”. In the content div I have some graphs and some tables. I want to download that div as a pdf when user click on download button. Is there a way to do that using javascript or jQuery?
Your solution requires some ajax method to pass the html to a back-end server that has a html to pdf facility and then returning the pdf output generated back to the browser.
First setting up the client side code, we will setup the jquery code as
Then intercept the data from the html2pdf generation script (somewhere from the internet).
convert_to_pdf.php
(given as url in JQUERY code) looks like this –AFAIK there is no native jquery function that does this. Best option would be to process the conversion on the server. How you do this depends on what language you are using (.net, php etc.). You can pass the content of the div to the function that handles the conversion, which would return a pdf to the user.
Yes, it’s possible to To capture div as PDFs in JS. You can can check the solution provided by https://grabz.it. They have nice and clean JavaScript API which will allow you to capture the content of a single HTML element such as a div or a span.
So, yo use it you will need and app+key and the free SDK. The usage of it is as following:
Let’s say you have a HTML:
To capture what is under the features id you will need to:
You need to replace the
http://www.example.com/my-page.html
with your target url and#feature
per your CSS selector.That’s all. Now, when the page is loaded an image screenshot will now be created in the same location as the script tag, which will contain all of the contents of the features div and nothing else.
The are other configuration and customization you can do to the div-screenshot mechanism, please check them out here
You can do it using jsPDF
HTML:
JavaScript:
Content inside a
<div class='html-content'>....</div>
can be downloaded as pdf with styles using jspdf & html2canvas.You need to refer both js libraries,
Then call below function,
Ref: pdf genration from html canvas and jspdf.
May be this will help someone.