Download a div in a HTML page as pdf using javascript

问题:

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?

回答1:

You can do it using jsPDF

HTML:

      
Hello, this is a H3 tag
      
a pararaph
 
 
 generate PDF 

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'); }); 

回答2:

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

   var options = {             "url": "/pdf/generate",             "data": "data=" + $("#content").html(),             "type": "post",         }    $.ajax(options) 

Then intercept the data from the html2pdf generation script as follows

   $html = $_POST['data'];    $pdf = html2pdf($html);     header("Content-Type: application/pdf"); //check this is the proper header for pdf    header("Content-Disposition: attachment; filename='some.pdf';");    echo $pdf; 

 

回答3:

There is no such a mechanism in jQuery, but you can use plugins like http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

Also check this post Is it possible to generate PDF using jQuery?

回答4:

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.

回答5:

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:

     
Acme Camera
     Price$399
Rating4.5 out of 5 
 
Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.
 

To capture what is under the features id you will need to:

//add the sdk   

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

文章来源: Download a div in a HTML page as pdf using javascript