In this post, I am mainly discussing a simple JavaScript library that helps us to create PDFs from HTML. I have created an awesome-looking PDF processor using the JavaScript library.
HTML to PDF JS library
html2pdf is the library that we are discussing. This library converts HTML to PDF by converting HTML into canvas (image) with the help of html2canvas and converting the image to pdf through jsPDF another javascript library with contacts the image into pdf.
There are several libraries are available to do this function. You can also use the jsPDF library. I am using the html2pdf library to do this project. If you want a tutorial on other HDMI to PDF converter libraries, comment in the comment section.https://www.youtube.com/embed/p0DBDoT3jKY
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML-to-PDF Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- html2pdf CDN link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<center>
<h1>hello world</h1>
<h2>HTML TO PDF TUTORIAL FLURATECH.COM</h2>
</center>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci, voluptatibus. Itaque assumenda quia quis
temporibus vero voluptatum velit ex, quod earum! Modi iste laboriosam blanditiis soluta nisi iusto amet
excepturi.</p>
<button id="download-button">Download as PDF</button>
<script>
const button = document.getElementById('download-button');
function generatePDF() {
// Choose the element that your content will be rendered to:here i am choosing BODY tag
const element = document.querySelector('body');
// Save the PDF for your user.
html2pdf().from(element).save();
}
button.addEventListener('click', generatePDF);
</script>
</body>
</html>
Top comments (0)