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

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?

asked Aug 1, 2011 at 9:39 1,247 2 2 gold badges 9 9 silver badges 3 3 bronze badges possible answer here: stackoverflow.com/questions/12108806/… Commented Apr 4, 2013 at 21:54 Does this answer your question? how to convert total html page to pdf using javascript or jquery Commented May 2 at 11:06

14 Answers 14

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.

answered May 27, 2017 at 19:30 Billcountry Billcountry 653 6 6 silver badges 6 6 bronze badges No answer is late :) . Thanks Commented Jun 9, 2020 at 11:49

This is what I used, although it did have difficulty putting the page breaks in the right spot. I had to add extra divs with   inside, and add X padding-top (X = page number) to the element i was page-breaking before, since each page's content would start higher and higher up. Not sure if it was a bootstrap conflict or what. Here's the code I added, in a function to run right before calling html2pdf: elements = document.getElementsByClassName("newBox"); for (var i = 0; i < elements.length; i++) ;

Commented Jul 16, 2021 at 18:22 But html2pdf breaks up my tabular UI elements (built using CSS grid) at weird places. Commented Dec 15, 2021 at 12:33

html2pdf is super easy to use! But it renders all content into an image and places that image into a PDF. So no selectable text.

Commented Apr 4, 2022 at 15:56

html2pdf has few limitations that one should consider. 1. it doesn't load iFrames 2. it usually doesn't render CSS correctly (as mentioned by @Ron16) 3. it doesn't load images hosted on 3rd party domains 4. As mentioned by @ironmouse - it renders all content into an image and places that image into a PDF

Commented Aug 17, 2023 at 7:56

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).

3,565 11 11 gold badges 64 64 silver badges 96 96 bronze badges answered Aug 1, 2011 at 9:49 169k 57 57 gold badges 355 355 silver badges 398 398 bronze badges jspdf look interesting, but the demos do not work in Firefox 5.0 nor IE! Commented Aug 1, 2011 at 9:58

jspdf has minimal support for features, it doesnt even support graphics. But unless the style system and rendering stuff is there - it's basically just useful for small notes. Otherwise you will have to write a whole HTML renderer in JS as well (or cheat and use canvas with drawElement, which is just supported in firefox i seem to remember). Javascript is really not up for this line of coding if you ask me. Perhaps call an external webservice is the easiest way.

Commented Aug 1, 2011 at 10:00

JavaScript (as a language) is entirely up to it. JavaScript running with the restrictions of browser security models and APIs less so.

Commented Aug 1, 2011 at 10:01

Im sure someone could build a house from matches or toothpicks, but at the end of the day - a fully blown pdf compiler with support for stitching, graphics, font embedding, styles and fully functional lookup tables is out of the question. Have a look at the source for jspdf - it supports only the most simple tags and no lookup dictionaries. A fully blown pdf compiler is hard to do in C++ or Delphi even, a pure JS implementation would be suicidal. There are companies who work for years selling only their pdf compilers (see gnostice for instance). This is not a "one liner".

Commented Aug 1, 2011 at 10:05

@JonLennartAasenden Yes it does have minimal support. You can still write a PDF writer in js if you want to. It's not an easy task however. A pure JS implementation is just as suicidal as C++ or Delphi. Don't pretend JS is a second-class citizen.

Commented Aug 1, 2011 at 11:04

Ya its very easy to do with javascript. Hope this code is useful to you.

Hello, this is a H3 tag 
a pararaph
answered Sep 17, 2015 at 8:17 Blackjoker Blackjoker 643 6 6 silver badges 6 6 bronze badges image not print in pdf :( you have a solution ?? Commented Nov 18, 2015 at 3:45 It doesn't support multipages nor css styles properly. Commented Mar 22, 2017 at 9:53 Does not support tables :( Loved the approach Commented Jun 9, 2017 at 21:05 The JSFiddle link leads to a 404 page Commented Jul 18, 2020 at 10:31

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"); >); >);
answered Jul 2, 2019 at 4:57 Hien Nguyen Hien Nguyen 18.9k 7 7 gold badges 55 55 silver badges 66 66 bronze badges

If i goto responsive mode and download the pdf, pdf page doesnt come properly, Is there a way to achieve the same result as desktop mode when i download using responsive mode.

Commented Jun 11, 2020 at 5:47 @Nancy you can change the width and height of content before taking the screen shot. Commented May 31, 2022 at 7:24 @Hien Nguyen For me it degrades the resolutions. Commented Mar 29 at 10:23

Here is how I would do it, its an idea not bulletproof design, you need to modify it

answered Aug 1, 2011 at 9:49 5,098 7 7 gold badges 40 40 silver badges 52 52 bronze badges

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

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf
answered Oct 10, 2013 at 8:55 2,044 23 23 silver badges 22 22 bronze badges Can you use it with javascript instead of a command line utility? Commented Mar 22, 2017 at 9:53

@Dynamic no, this is a headless browser which you can control through javascript. You can tell it to print a web page to PDF via javascript but the implementation is not javascript. However, used it for this exact scenario by wrapping it in an app that consumes a queue of pages to print, and i use javascript to add entries to the queue. Similarly you could wrap it in a service. To control how things get printed though you're under the same limitation as chrome print (e.g. css and js to create a print friendly view)

Commented May 29, 2017 at 3:48

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

answered Jun 20, 2019 at 0:25 Matej Janovčík Matej Janovčík 1,262 13 13 silver badges 13 13 bronze badges

I know this is an old question, but depending on the readers use case an easy way is to call window.print() and tell the user to choose the save as PDF option. In CSS you can use media queries to hide or show content specifically for printing so you can control what is shown on the PDF. For example I use these .no-print and .only-print for this purpose.

.only-print < display: none >@media print < .no-print < display: none >.only-print < display: block >>

In my use case I hide all the navigation and buttons stuff, I also hide some collapsed blocks and instead show all the uncollapsed blocks.

answered Oct 7, 2021 at 12:30 664 1 1 gold badge 8 8 silver badges 22 22 bronze badges

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:"Hi there!" >, 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"); >>);
answered Mar 28, 2016 at 11:28 Andre Borges Andre Borges 1,432 1 1 gold badge 17 17 silver badges 39 39 bronze badges Freehtmltopdf.com doesn't seem to be up any longer Commented Jul 2, 2018 at 20:11 PDFMage is no longer free, unfortunately. Commented Jun 7, 2020 at 19:49

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

answered Aug 1, 2011 at 9:48 Jon Lennart Aasenden Jon Lennart Aasenden 4,000 2 2 gold badges 31 31 silver badges 46 46 bronze badges Why are C++ and Delphi inheritantly better at creating a PDF writer? Commented Aug 1, 2011 at 11:06

Because those languages were buildt to make advanced software. Javascript was not. Javascript was never finished, this is why the prototype system is hanging out. The author had planned to add a HL to it with real classes and more datatypes - but he didnt have time. So it was published "as is". It does not support pointers, raw memory allocation is painful, it does not support some of the native datatypes you find in other languages, it does not support packed structures (struct in C, Record in Pascal) . the list is endless. I love JS, but it is a browser toy, not a real language.

Commented Aug 10, 2011 at 2:55

There are some Java based writers out there, and if you look at the size of the source-code, it should be fairly self evident that it would be even longer under Javascript - but the crucial point is: the IO formating and the lookup tables. Im sure someone could do it - but it would be extremely slow and basically, a waste of time. And how will you embed font data? You cant even get the file from the OS, let alone convert it (which is a whole library in itself) and embed it. Why build a house of matches when you can just, build a normal house?

Commented Aug 10, 2011 at 3:05

"but it is a browser toy, not a real language." That's like saying Scheme is not a real language. "it should be fairly self evident that it would be even longer under Javascrip", no. Java is severely more verbose then JavaScript. It should be about 2/3 shorter then the Java version. "but it would be extremely slow and basically," By extremely slow you mean 3/4x slower then C++ ? Can we please stop treating js as a second class citizen. Thanks.

Commented Aug 10, 2011 at 7:42

Regardless of your personal opinion, Jon, could you stop making the assertion that "Javascript is not a real language," because that's BS. Javascript is an extremely powerful language that's optimized for different purposes than a low-level compiled language like C or C++. There are things you can do in JS that you cannot do in C or C++, but does that mean C and C++ aren't "real" languages? No, just that they're meant for different things. JS is just as real a programming language as any other turing-complete language.