Download a div in a HTML page as pdf using javascript

Question

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

User · Answer

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/convert_to_pdf.php",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

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 -

<?php
    $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;
?>

User · Answer

You can do it using jsPDF  HTML    lt div id  content  gt        lt h3 gt Hello  this is a H3 tag lt  h3 gt        lt p gt A paragraph lt  p gt   lt  div gt   lt div id  editor  gt  lt  div gt   lt button id  cmd  gt generate PDF lt  button gt    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

User · Answer

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    lt div id  features  gt       lt h4 gt Acme Camera lt  h4 gt       lt label gt Price lt  label gt  399 lt br   gt       lt label gt Rating lt  label gt 4 5 out of 5  lt  div gt   lt p gt 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  lt  p gt    To capture what is under the features id you will need to     add the sdk  lt script type  text javascript  src  grabzit min js  gt  lt  script gt   lt script type  text javascript  gt    login with your key and secret   GrabzIt  KEY    SECRET   ConvertURL  http   www example com my-page html     target     features    format    pdf    Create     lt  script gt    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

User · Answer

Content inside a  lt div class  html-content  gt      lt  div gt  can be downloaded as pdf with styles using jspdf  amp  html2canvas   You need to refer both js libraries     lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs jspdf 1 5 3 jspdf min js  gt  lt  script gt   lt script type  text javascript  src  https   html2canvas hertzen com dist html2canvas js  gt  lt  script gt    Then call below function      Create PDf from HTML    function CreatePDFfromHTML         var HTML Width       html-content   width        var HTML Height       html-content   height        var top left margin   15      var PDF Width   HTML Width    top left margin   2       var PDF Height    PDF Width   1 5     top left margin   2       var canvas image width   HTML Width      var canvas image height   HTML Height       var totalPDFPages   Math ceil HTML Height   PDF Height  - 1       html2canvas     html-content   0   then function  canvas            var imgData   canvas toDataURL  image jpeg   1 0           var pdf   new jsPDF  p    pt    PDF Width  PDF Height            pdf addImage imgData   JPG   top left margin  top left margin  canvas image width  canvas image height           for  var i   1  i  lt   totalPDFPages  i                   pdf addPage PDF Width  PDF Height               pdf addImage imgData   JPG   top left margin  - PDF Height i   top left margin 4  canvas image width canvas image height                     pdf save  Your PDF Name pdf                html-content   hide                Ref  pdf genration from html canvas and jspdf   May be this will help someone

User · Answer

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

[javascript] Download a div in a HTML page as pdf using javascript

Examples related to javascript

Examples related to jquery