Is it possible to save HTML page as PDF using JavaScript or jquery

Question

Is it possible to save HTML page as PDF using JavaScript or jquery   In Detail   I generated one HTML Page which contains a table   It has one button  save as PDF   If user clicks that button then that HTML page has to convert as PDF file   Is it possible using JavaScript or jquery

User · Answer

In short  no  The first problem is access to the filesystem  which in most browsers is set to no by default due to security reasons  Modern browsers sometimes support minimalistic storage in the form of a database  or you can ask the user to enable file access   If you have access to the filesystem then saving as HTML is not that hard  see the file object in the JS documentation  - but PDF is not so easy  PDF is a quite advanced file-format that really is ill suited for Javascript  It requires you to write information in datatypes not directly supported by Javascript  such as words and quads  You also need to pre-define a dictionary lookup system that must be saved to the file  Im sure someone could make it work  but the effort and time involved would be better spent learning C   or Delphi   HTML export however should be possible if the user gives you non restricted access

User · Answer

This might be a late answer but this is the best around  https   github com eKoopmans html2pdf  Pure javascript implementation  Allows you to specify just a single element by ID and convert it

User · Answer

Yes  For example you can use the solution by https   grabz it    It s got a Javascript API which can be used in different ways to grab and manipulate the screenshot  In order to use it in your app you will need to first get an app key and secret and download the free Javascript SDK    So  let s see a simple example for using it     first include the grabzit min js library in the web page  lt script src  grabzit min js  gt  lt  script gt    include the code below to add the screenshot to the body tag      lt script gt    use secret key to sign in  replace the url  GrabzIt  Sign in to view your Application Key   ConvertURL  http   www google com   Create     lt  script gt    Then simply wait a short while and the image will automatically appear at the bottom of the page  without you needing to reload the page   That s the simplest one  For more examples with image manipulation  attaching screenshots to elements and etc check the documentation

User · Answer

Yes  Use jspdf To create a pdf file    You can then turn it into a data URI and inject a download link into the DOM  You will however need to write the HTML to pdf conversion yourself   Just use printer friendly versions of your page and let the user choose how he wants to print the page   Edit  Apparently it has minimal support  So the answer is write your own PDF writer or get a existing PDF writer to do it for you  on the server

User · Answer

You can use Phantomjs  Download here and use the following example to test the html- pdf conversion feature https   github com ariya phantomjs blob master examples rasterize js  Example code   phantomjs exe examples rasterize js http   www w3 org Style CSS Test CSS3 Selectors current xhtml index html sample pdf

User · Answer

Here is how I would do it  its an idea not bulletproof design  you need to modify it       The user clicks the save as PDF button The server is sent a call using ajax The server responds with a URL for PDF generated using HTML  I have used Apache FOP very succssfully The js handling the ajax response does a location href to point the URL send by JS and as soon as that URL loads  it sends the file using content disposition header as attachment forcing user to download the file

User · Answer

It is much easier and reliable to convert html to pdf server side  We are using Google Puppeteer  It is well maintained with wrappers for any server side language of your choosing  Puppeteer uses headless Chrome to generate screenshots and or PDF files  It will save you a LOT of headache especially if you need to generate complex PDF files with tables  images  graphs  multiple pages and so  https   developers google com web tools puppeteer

User · Answer

I used jsPDF and dom-to-image library to export HTML to PDF   I post here as reference to whom concern       downloadPDF   click function          domtoimage toPng document getElementById  content2           then function  blob              var pdf   new jsPDF  l    pt        content2   width        content2   height                pdf addImage blob   PNG   0  0      content2   width        content2   height               pdf save  test pdf                    Demo  https   jsfiddle net viethien md03wb21 27

User · Answer

x000D   x000D      cmd2   click function     x000D     var options     x000D       width   800  x000D        x000D     var pdf   new jsPDF  p    pt    a4    x000D     pdf addHTML     content2    -1  220  options  function     x000D       pdf save  admit card pdf    x000D         x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs html2canvas 0 4 1 html2canvas min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 5 jspdf min js  gt  lt  script gt  x000D   x000D   lt div id  content2  style  background   fff border-bottom  1px solid  ffffff   gt  x000D                        lt div class  tokenDet  style  padding  15px border  1px solid  000 width  80  margin  0 auto position  relative overflow  hidden   gt  x000D                            lt div class  title  style  text-align  center border-bottom  1px solid  000 margin-bottom  15px   gt  x000D                                lt h2 gt Entrance Exam Hall Ticket lt  h2 gt  x000D                               lt  div gt  x000D                               lt div class  parentdiv  style  display  inline-block width  100  position  relative   gt  x000D                                lt div class  innerdiv  style  width  80  float  left   gt  x000D                                 lt div class  restDet  gt  x000D                                           lt div class  div  gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Name lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt Santanu Patra lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt D O B  lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt 17th April  1995 lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Address lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt P S  Srijan Corporate Park  Saltlake  Sector 5  Kolkata-91 lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Contact Number lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt 9874563210 lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Email Id lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt santanu macallied com lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Parent s  Name lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt S  Patra lt  span gt  lt br   gt  lt span gt 7896541230 lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Exam Center lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt Institute of Engineering  amp  Management lt  span gt  x000D                                               lt  div gt  x000D                                               lt div class  label  style  width  30  float  left   gt  x000D                                                   lt strong gt Hall Number lt  strong gt  x000D                                               lt  div gt  x000D                                               lt div class  data  style  width  70  display  inline-block   gt  x000D                                                   lt span gt COM-32 lt  span gt  x000D                                               lt  div gt  x000D                                           lt  div gt  x000D                                       lt  div gt  x000D                                lt  div gt  x000D                                   lt div class  sideDiv  style  width  20  float  left   gt  x000D                                    lt div class  atts  style  float  left width  100    gt  x000D                                        lt div class  photo  style  width  115px height  150px float  right   gt  x000D                                            lt img src  images candidateImg gif  style  width  100     gt  x000D                                           lt  div gt  x000D                                           lt div class  sign  style  position  absolute bottom  0 right  0 border-top  1px dashed  000 left  80  text-align  right   gt  x000D                                            lt small gt Self Attested lt  small gt  x000D                                           lt  div gt  x000D                                       lt  div gt  x000D                                   lt  div gt  x000D                               lt  div gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                       lt button class  btn btn-info  id  cmd2  gt Download Token lt  button gt  x000D   x000D   x000D

User · Answer

There is another very obvious way to convert HTML to PDf using JavaScript  use an online API for that  This will work fine if you don t need to do the conversion when the user is offline   PdfMage is one option that has a nice API and offers free accounts  I m sure you can find many alternatives  for example  here    For PdfMage API you d have something like this      ajax       url   https   pdfmage org pdf-api v1 process       type   POST       crossDomain  true      data    Html   lt html gt  lt body gt Hi there  lt  body gt  lt  html gt          dataType   json       headers             X-Api-Key    your-key-here     not very secure  but a valid option for non-public domains intranet            success  function  response            window location   response Data DownloadUrl             error  function  xhr  status            alert  error

User · Answer

Ya its very easy to do with javascript  Hope this code is useful to you  You ll need the JSpdf library   lt div id  quot content quot  gt        lt h3 gt Hello  this is a H3 tag lt  h3 gt        lt p gt a pararaph lt  p gt   lt  div gt   lt div id  quot editor quot  gt  lt  div gt   lt button id  quot cmd quot  gt Generate PDF lt  button gt    lt script gt      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                    This code is collected but useful  click below to jsfiddle link   lt  script gt   jsfiddle  link here

[javascript] Is it possible to save HTML page as PDF using JavaScript or jquery?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui