Generate pdf from HTML in div using Javascript

Question

I have the following html code    lt  DOCTYPE html gt   lt html gt       lt body gt           lt p gt don t print this to pdf lt  p gt           lt div id  pdf  gt               lt p gt  lt font size  3  color  red  gt print this to pdf lt  font gt  lt  p gt           lt  div gt       lt  body gt   lt  html gt    All I want to do is to print to pdf whatever is found in the div with an id of  pdf    This must be done using JavaScript   The  pdf  document should then be automatically downloaded with a filename of  foobar pdf   I ve been using jspdf to do this  but the only function it has is  text  which accepts only string values   I want to submit HTML to jspdf  not text

User · Answer

This example works great   lt button onclick  quot genPDF   quot  gt Generate PDF lt  button gt    lt script src  quot https   cdnjs cloudflare com ajax libs jspdf 1 5 3 jspdf min js quot  gt  lt  script gt   lt script gt      function genPDF             var doc   new jsPDF            doc text 20  20   Hello world             doc text 20  30   This is client-side Javascript  pumping out a PDF             doc addPage            doc text 20  20   Do you like that                  doc save  Test pdf           lt  script gt

User · Answer

This is the simple solution  This works for me You can use the javascript  print concept and simple save this as pdf    lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt  lt  title gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt       lt script type  text javascript  gt              btnPrint   live  click   function                  var divContents       dvContainer   html                var printWindow   window open          height 400 width 800                printWindow document write   lt html gt  lt head gt  lt title gt DIV Contents lt  title gt                 printWindow document write   lt  head gt  lt body  gt                 printWindow document write divContents               printWindow document write   lt  body gt  lt  html gt                 printWindow document close                printWindow print                     lt  script gt   lt  head gt   lt body gt       lt form id  form1  gt       lt div id  dvContainer  gt          This content needs to be printed       lt  div gt       lt input type  button  value  Print Div Contents  id  btnPrint    gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

any one try this      function                var            form       form               cache width   form width               a4    595 28  841 89      for a4 size paper width and height                create pdf   on  click   function                       body   scrollTop 0                 createPDF                              create pdf           function createPDF                   getCanvas   then function  canvas                      var                    img   canvas toDataURL  quot image png quot                       doc   new jsPDF                          unit   px                          format   a4                                           doc addImage img   JPEG   20  20                     doc save  Bhavdip-html-to-pdf pdf                      form width cache width                                               create canvas object           function getCanvas                   form width  a4 0    1 33333  - 80  css  max-width    none                  return html2canvas form                      imageTimeout  2000                    removeContainer  true

User · Answer

No depenencies  pure JS To add CSS or images - do not use relative URLs  use full URLs http      domain    path css or so  It creates separate HTML document and it has no context of main thing  you can also embed images as base64     This served me for years now   export default function printDiv  divId  title       let mywindow   window open      PRINT    height 650 width 900 top 100 left 150       mywindow document write   lt html gt  lt head gt  lt title gt   title  lt  title gt       mywindow document write   lt  head gt  lt body  gt       mywindow document write document getElementById divId  innerHTML     mywindow document write   lt  body gt  lt  html gt        mywindow document close       necessary for IE  gt   10   mywindow focus       necessary for IE  gt   10      mywindow print      mywindow close       return true

User · Answer

I was able to get jsPDF to print dynamically created tables from a div     document  ready function                  pdfDiv   click function          var pdf   new jsPDF  p   pt   letter        var specialElementHandlers           rentalListCan   function  element  renderer            return true                        pdf addHTML     rentalListCan   first    function             pdf save  caravan pdf                          Works great with Chrome and Firefox    formatting is all blown up in IE   I also included these    lt script src  js jspdf js  gt  lt  script gt       lt script src  js jspdf plugin from html js  gt  lt  script gt       lt script src  js jspdf plugin addhtml js  gt  lt  script gt       lt script src    mrrio github io jsPDF dist jspdf debug js  gt  lt  script gt       lt script src  http   html2canvas hertzen com build html2canvas js  gt  lt  script gt       lt script type  text javascript  src    libs FileSaver js FileSaver js  gt  lt  script gt       lt script type  text javascript  src    libs Blob js Blob js  gt  lt  script gt       lt script type  text javascript  src    libs deflate js  gt  lt  script gt       lt script type  text javascript  src    libs adler32cs js adler32cs js  gt  lt  script gt        lt script type  text javascript  src  js jspdf plugin addimage js  gt  lt  script gt       lt script type  text javascript  src  js jspdf plugin sillysvgrenderer js  gt  lt  script gt       lt script type  text javascript  src  js jspdf plugin split text to size js  gt  lt  script gt       lt script type  text javascript  src  js jspdf plugin standard fonts metrics js  gt  lt  script gt

User · Answer

One way is to use window print   function  Which does not require any library  Pros  1 No external library require   2 We can print only selected parts of body also   3 No css conflicts and js issues   4 Core html js functionality  ---Simply add below code  CSS to    media print           body                 visibility  hidden     part to hide at the time of print             -webkit-print-color-adjust  exact  important     not necessary use                         if colors not visible                     printBtn               visibility  hidden  important     To hide                      page-wrapper                 visibility  visible     Print only required part             text-align  left              -webkit-print-color-adjust  exact  important                    JS code - Call bewlow function on btn click   scope printWindow   function        window print       Note  Use  important in every css object  Example -    legend      background   9DD2E2  important

User · Answer

As mentioned  you should use jsPDF and html2canvas  I ve also found a function inside issues of jsPDF which splits automatically your pdf into multiple pages  sources   function makePDF          var quotes   document getElementById  container-fluid         html2canvas quotes            onrendered  function canvas                 MAKE YOUR PDF         var pdf   new jsPDF  p    pt    letter             for  var i   0  i  lt   quotes clientHeight 980  i                      This is all just html2canvas stuff             var srcImg    canvas              var sX        0              var sY        980 i     start 980 pixels down for every new page             var sWidth    900              var sHeight   980              var dX        0              var dY        0              var dWidth    900              var dHeight   980               window onePageCanvas   document createElement  canvas                onePageCanvas setAttribute  width   900               onePageCanvas setAttribute  height   980               var ctx   onePageCanvas getContext  2d                   details on this usage of this function                  https   developer mozilla org en-US docs Web API Canvas API Tutorial Using images Slicing             ctx drawImage srcImg sX sY sWidth sHeight dX dY dWidth dHeight                   document body appendChild canvas               var canvasDataURL   onePageCanvas toDataURL  image png   1 0                var width           onePageCanvas width              var height          onePageCanvas clientHeight                   If we re on anything other than the first page                 add another page             if  i  gt  0                    pdf addPage 612  791     8 5  x 11  in pts  in 72                                now we declare that we re working on that page             pdf setPage i 1                   now we add content to that page              pdf addImage canvasDataURL   PNG   20  40   width  62    height  62                           after the for loop is finished running  we save the pdf          pdf save  test pdf

User · Answer

You can use autoPrint   and set output to  dataurlnewwindow  like this   function printPDF         var printDoc   new jsPDF        printDoc fromHTML     pdf   get 0   10  10    width   180        printDoc autoPrint        printDoc output  dataurlnewwindow       this opens a new popup   after this the PDF opens the print window view but there are browser inconsistencies with how this is handled

User · Answer

Use pdfMake js and this Gist     I found the Gist here along with a link to the package html-to-pdfmake  which I end up not using for now    After npm install pdfmake and saving the Gist in htmlToPdf js I use it like this   const pdfMakeX   require  pdfmake build pdfmake js    const pdfFontsX   require  pdfmake-unicode dist pdfmake-unicode js    pdfMakeX vfs   pdfFontsX pdfMake vfs  import   as pdfMake from  pdfmake build pdfmake   import htmlToPdf from    htmlToPdf js    var docDef   htmlToPdf   lt b gt Sample lt  b gt     pdfMake createPdf  content docDef   download  sample pdf      Remarks     My use case is to create the relevant html from a markdown document  with markdown-it  and subsequently generating the pdf  and uploading its binary content  which I can get with pdfMake s getBuffer   function   all from the browser  The generated pdf turns out to be nicer for this kind of html than with other solutions I have tried  I am dissatisfied with the results I got from jsPDF fromHTML   suggested in the accepted answer  as that solution gets easily confused by special characters in my HTML that apparently are interpreted as a sort of markup and totally mess up the resulting PDF  Using canvas based solutions  like the deprecated jsPDF from html   function  not to be confused with the one from the accepted answer  is not an option for me since I want the text in the generated PDF to be pasteable  whereas canvas based solutions generate bitmap based PDFs  Direct markdown to pdf converters like md-to-pdf are server side only and would not work for me  Using the printing functionality of the browser would not work for me as I do not want to display the generated PDF but upload its binary content

User · Answer

jsPDF is able to use plugins  In order to enable it to print HTML  you have to include certain plugins and therefore have to do the following    Go to https   github com MrRio jsPDF and download the latest Version  Include the following Scripts in your project    jspdf js jspdf plugin from html js jspdf plugin split text to size js jspdf plugin standard fonts metrics js    If you want to ignore certain elements  you have to mark them with an ID  which you can then ignore in a special element handler of jsPDF  Therefore your HTML should look like this    lt  DOCTYPE html gt   lt html gt     lt body gt       lt p id  ignorePDF  gt don t print this to pdf lt  p gt       lt div gt         lt p gt  lt font size  3  color  red  gt print this to pdf lt  font gt  lt  p gt       lt  div gt     lt  body gt   lt  html gt    Then you use the following JavaScript code to open the created PDF in a PopUp   var doc   new jsPDF              var elementHandler         ignorePDF   function  element  renderer        return true         var source   window document getElementsByTagName  body   0   doc fromHTML      source      15      15               width   180  elementHandlers   elementHandler          doc output  dataurlnewwindow      For me this created a nice and tidy PDF that only included the line  print this to pdf    Please note that the special element handlers only deal with IDs in the current version  which is also stated in a GitHub Issue  It states       Because the matching is done against every element in the node tree  my desire was to make it as fast as possible  In that case  it meant  Only element IDs are matched  The element IDs are still done in jQuery style   id   but it does not mean that all jQuery selectors are supported    Therefore replacing   ignorePDF  with class selectors like   ignorePDF  did not work for me  Instead you will have to add the same handler for each and every element  which you want to ignore like   var elementHandler         ignoreElement   function  element  renderer        return true           anotherIdToBeIgnored   function  element  renderer        return true           From the examples it is also stated that it is possible to select tags like  a  or  li   That might be a little bit to unrestrictive for the most usecases though      We support special element handlers  Register them with jQuery-style   ID selector for either ID or node name     iAmID    div    span  etc     There is no support for any other type of selectors  class  of   compound  at this time    One very important thing to add is that you lose all your style information  CSS   Luckily jsPDF is able to nicely format h1  h2  h3 etc   which was enough for my purposes  Additionally it will only print text within text nodes  which means that it will not print the values of textareas and the like  Example    lt body gt     lt ul gt       lt  -- This is printed as the element contains a textnode -- gt               lt li gt Print me  lt  li gt     lt  ul gt     lt div gt       lt  -- This is not printed because jsPDF doesn t deal with the value attribute -- gt       lt input type  textarea  value  Please print me  too   gt     lt  div gt   lt  body gt

User · Answer

To capture div as PDF you can use https   grabz it solution  It s got a JavaScript API which is easy and flexible and will allow you to capture the contents of a single HTML element such as a div or a span  In order to implement it you will need to first get an app key and secret and download the  free  SDK    And now an example   Let s say you have the 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    Please note the target   feature   feature is you CSS selector  like in the previous example  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

i use jspdf and html2canvas for css rendering and i export content of specific div as this is my code    document  ready function          let btn     c-oreder-preview        btn text  download        btn on  click      gt                 c-invoice   modal  show            setTimeout function                  html2canvas document querySelector   c-print    then canvas   gt                          previewBeforeDownload   html canvas                   var imgData   canvas toDataURL  image jpeg  1                   var pdf   new jsPDF  p    mm    a4                    var pageWidth   pdf internal pageSize getWidth                    var pageHeight   pdf internal pageSize getHeight                    var imageWidth   canvas width                  var imageHeight   canvas height                   var ratio   imageWidth imageHeight  gt   pageWidth pageHeight   pageWidth imageWidth   pageHeight imageHeight                    pdf   new jsPDF this state orientation  undefined  format                   pdf addImage imgData   JPEG   0  0  imageWidth   ratio  imageHeight   ratio                   pdf save  invoice pdf                          previewBeforeDownload   hide                        c-invoice   modal  hide                              500

User · Answer

if you need to downloadable pdf of a specific page just add button like this   lt h4 onclick  window print     gt  Print  lt  h4 gt    use window print   to print your all page not just a div

User · Answer

If you want to export a table  you can take a look at this export sample provided by the Shield UI Grid widget   It is done by extending the configuration like this       exportOptions        proxy    filesaver save       pdf            fileName   shieldui-export           author   John Smith           dataSource                data  gridData                    readDataSource  true          header                cells                      field   id   title   ID   width  50                      field   name   title   Person Name   width  100                      field   company   title   Company Name   width  100                      field   email   title   Email Address

[javascript] Generate pdf from HTML in div using Javascript

Examples related to javascript

Examples related to jspdf