Convert HTML To PDF In Javascript (Simple Examples)

Welcome to a tutorial on how to convert HTML to PDF files in Javascript. Yes, creating PDF files is not limited to the server-side.

To generate PDF files from HTML in Javascript:

We can use a library called HTML2PDF.
Simply download the library from their Github page, or load it from CDNJS.
To convert the entire HTML page into a PDF file – html2pdf().from(document.body).save();

That covers the quick basics, but read on if you need more examples!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

HTML TO PDF WITH JAVASCRIPT

All right, let us now get into some examples of using the HTML2PDF library to turn HTML into a PDF file.

EXAMPLE 1) SAVE THE ENTIRE PAGE AS PDF FILE

1-entire-page.html

<!-- (A) LOAD HTML2PDF -->
<!-- https://cdnjs.com/libraries/html2pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
 
<!-- (B) DUMMY CONTENTS -->
<h1>Hello World!</h1>
<p>This is an example.</p>
 
<!-- (C) ENTIRE PAGE TO PDF -->
<script>
function toPDF () {
  html2pdf()
    .from(document.body)
    .save();
}
</script>
<button onclick="toPDF()">To PDF</button>

As in the introduction, all we need to do is to load the HTML2PDF library – html2pdf().from(document.body).save() will convert the entire page into a PDF file. But please take note, the generated PDF file may not be 100% accurate on complex pages.

EXAMPLE 2) CONVERT A SECTION INTO PDF (AND OPTIONS)

2-section.html

<!-- (A) LOAD HTML2PDF -->
<!-- https://cdnjs.com/libraries/html2pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
 
<!-- (B) DUMMY CONTENTS -->
<h1>Hello World!</h1>
<div id="demo">
  <div><img src="music.jpg"></div>
  <p>Convert this section to PDF only.</p>
</div>
<p>This is an example.</p>
 
<!-- (C) SECTION TO PDF -->
<script>
function toPDF () {
  html2pdf()
    // (C1) SET OPTIONS
    .set({
      margin: 1,
      filename: "demo.pdf",
      image: { type: "jpeg", quality: 0.8 },
      enableLinks : true,
      jsPDF: { format: "A4", orientation: "landscape" }
    })
 
    // (C2) GET CONTENT FROM SECTION
    .from(document.getElementById("demo"))
 
    // (C3) SAVE TO FILE
    .save();
}
</script>
<button onclick="toPDF()">To PDF</button>

Not going to go through these step-by-step, but it should be pretty self-explanatory.

(C1) Yes, HTML2PDF does accept options. We can set the page format and orientation of PDF, alongside some other settings such as the image quality.
(C2 & C3) Same old “get content and save to PDF”, except that we are getting from a single <div> instead of the entire <body> now.

EXAMPLE 3) HTML STRING TO PDF

3-string.html

<!-- (A) LOAD HTML2PDF -->
<!-- https://cdnjs.com/libraries/html2pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
 
<!-- (B) PDF FROM HTML STRING -->
<script>
function toPDF () {
html2pdf()
  // (B1) FEED HTML STRING
  .from(`<h1>Hello World!</h1><p>This is an example.</p>`)
 
  // (B2) SAVE TO FILE
  .save();
}
</script>
 
<!-- (C) GO! -->
<button onclick="toPDF()">To PDF</button>

Lastly, I don’t think this needs further explanation – We can also directly feed an HTML string into the library to generate a PDF file.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

MANUAL CONVERSION TO PDF

Lastly, this is an alternative for you guys who may only need to convert a few pages – Just print and select “Save as PDF” as the destination. Yep, some modern browsers already have this converter built-in.

LINKS & REFERENCES

Convert HTML To PDF in PHP – Code Boxx

INFOGRAPHIC CHEAT SHEET

Javascript Convert HTML to PDF (Click To Enlarge)

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!