index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML2PDF Screenshot Tool</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" /> </head> <body class="bg-gray-100"> <div class="container mx-auto p-8"> <h1 class="text-3xl font-bold text-center mb-6">HTML to PDF Tool</h1> <!-- Section to be captured --> <div id="capture-section" class="bg-white p-8 rounded-lg shadow-lg"> <h2 class="text-xl font-semibold mb-4">This section will be captured as a PDF!</h2> <p>This content will be converted into a PDF and can be downloaded by the user.</p> </div> <!-- Button to capture --> <div class="mt-6 text-center"> <button id="generate-pdf-btn" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Generate PDF</button> </div> </div> <script> document.getElementById('generate-pdf-btn').addEventListener('click', function () { // Select the section to be captured as PDF const captureSection = document.getElementById('capture-section'); // Use html2pdf.js to generate and download the PDF html2pdf().from(captureSection).set({ margin: 1, filename: 'screenshot.pdf', html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }).save(); }); </script> </body> </html> |
