Hello guys, in this post, I am sharing with you an awesome HTML into PDF converting library "HTML2PDF". Also, I will share with you a demo project source code. Advantages: It is easy to use. You can convert HTML to PDF with just a few lines of code. It is flexible. You can customize the output PDF to meet your specific needs. It is reliable. HTML2PDF has been used by millions of people to generate PDFs from HTML.
What is the HTML2PDF library?
HTML2PDF is a powerful and versatile library that can be used to generate PDFs from HTML in a variety of ways. If you need to generate PDFs from your HTML content, I recommend checking out HTML2PDF. It is available in a variety of programming languages, including PHP, JavaScript, Python, and Ruby.
From HTML to PDF JavaScript
For converting HDMI to PDF we want to download and install the html2pdf library. There are three methods available for installing the HTML2PDF library.
Link the library through JavaScript using a CDN link. An Internet connection is necessary for getting output in the CDN linking method. I always recommend this method to beginners.
<script crossorigin="anonymous" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
Another method is downloading the HTML2PDF library to your system. You can download it from GitHub. After downloading use this code to link with your project.
<script src="html2pdf.bundle.min.js"></script>
The third trick is to download the package through npm. I do not prefer these two beginners. You can choose the first or second method.
npm install html2pdf.js
Workflow
The basic workflow of html2pdf.js tasks (enforced by the prereq system) is:
.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()HTML to PDF converter JS source code
Simple source code: This code will result in converting the whole screen to PDF.
<!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>
Post a Comment