To export a PDF using JavaScript, you can use a combination of HTML, CSS, and a JavaScript library like jspdf or html2pdf.js. Below, I'll provide an example using jspdf, which is a popular library for generating PDFs in the browser.
- Include the required libraries in your HTML file:
html<!-- Import jspdf library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
- Create an HTML structure that you want to convert into a PDF. Make sure to add a button that triggers the PDF generation.
html<!DOCTYPE html>
<html>
<head>
<title>PDF Export Example</title>
</head>
<body>
<h1>PDF Export Example</h1>
<p>This is some sample content to be included in the PDF.</p>
<!-- Button to trigger PDF export -->
<button id="export-btn">Export as PDF</button>
<script>
// Add your PDF export logic here
</script>
</body>
</html>
- Add the JavaScript code to handle the PDF export when the button is clicked:
html<!-- ... -->
<body>
<!-- ... -->
<button id="export-btn">Export as PDF</button>
<script>
// Wait for the DOM to load
document.addEventListener('DOMContentLoaded', function () {
// Function to handle PDF export
function exportPDF() {
// Create a new jsPDF instance
const doc = new jsPDF();
// Add content to the PDF
doc.text(20, 20, 'PDF Export Example');
doc.text(20, 30, 'This is some sample content to be included in the PDF.');
// Save the PDF
doc.save('exported_pdf.pdf');
}
// Attach the exportPDF function to the button click event
document.getElementById('export-btn').addEventListener('click', exportPDF);
});
</script>
</body>
</html>
When you click the "Export as PDF" button, it will trigger the exportPDF function, which will create a new instance of jsPDF, add content to it, and save it as a PDF file named "exported_pdf.pdf" in the user's browser.
Keep in mind that generating complex and styled PDFs may require more advanced configurations and libraries. jspdf is suitable for basic use cases, but for more complex PDF generation, you might need to explore other options or libraries.