Hi Develpers,
Today we are going to learn to generate PDF from HTML by using the html2pdf.js . We are using html2pdf.js library to convert HTML to the PDF format. html2pdf.js library can also be used in laravel, PHP, node.js, and python etc.
The simplest way to use html2pdf.js is to include it as a script in your HTML by using cdnjs file.
<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>Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:
var element = document.getElementById('generate-pdf');
html2pdf(element);we will simple way to generate a pdf file from HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How To Generate PDF From HTML Using Javascript - ITSolutionsGuides</title>
</head>
<body>
<div id="html2pdf" style="display: block; width: 90%; margin: auto;">
<h2>How To Generate PDF From HTML Using Javascript - ITSolutionsGuides</h2>
<h3>What is the moto of ITSolutionsGuides?</h3>
<p> ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers.As a web developer we all know the struuggles of the web developers while facing any issues. We started ITSolutionsGuides to share our experience to all the developers. Kindly please support us for providing the quality content also feel free to contact us. We have social media accounts also to spread our knowledge across all the platforms.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div style="display: block; width: 90%; margin: auto;"> <a href="javascript:generateHTML2PDF()">Dowload PDF</a></div>
</body>
</html>
<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>
<script>
function generateHTML2PDF() {
var element = document.getElementById('html2pdf');
html2pdf(element);
}
</script>html2pdf.js can be configured using an optional opt parameter
var element = document.getElementById('id_name');
var opt = {
margin: 1,
filename: 'test_file.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();html2pdf.js has the ability to automatically add page-breaks to clean up your document.
// Avoid page-breaks on all elements, and add one before #page2el.
html2pdf().set({
pagebreak: { mode: 'avoid-all', before: '#page2el' }
});
// Enable all 'modes', with no explicit elements.
html2pdf().set({
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
});
// No modes, only explicit elements.
html2pdf().set({
pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' }
});We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides