Html to pdf converter - source code

0

Key Features of the HTML to PDF Converter with File Upload

  • 📂 HTML File Upload
    Allows users to upload .html files from their device.
  • 🔍 Content Preview
    Uploaded HTML content is rendered inside a styled container for preview before PDF conversion.
  • 📄 Convert Any HTML to PDF
    Converts the rendered HTML content into a downloadable PDF using the html2pdf.js library.
  • 🌐 Runs Entirely in Browser
    No server or backend required – works offline and in-browser.
  • 🎨 Clean & Responsive UI
    Simple, modern design using HTML and CSS for a smooth user experience.
  • 🖨️ High-Quality Output
    Uses html2canvas and jsPDF behind the scenes for accurate rendering and sharp PDF results.
  • 🧾 Custom Filename Support (optional upgrade)
    Easy to add support for user-defined filenames or timestamped PDF names.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Upload HTML to PDF</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <h1>Upload HTML File and Convert to PDF</h1> <input type="file" id="htmlFileInput" accept=".html" /> <button onclick="generatePDF()">Download as PDF</button> <div id="pdf-content" class="pdf-box"> <p><i>Uploaded HTML content will appear here and be converted to PDF.</i></p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 700px;
  margin: 50px auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: #333;
}

.pdf-box {
  text-align: left;
  margin-top: 20px;
  padding: 20px;
  border: 1px dashed #888;
  border-radius: 6px;
  background-color: #fefefe;
  min-height: 150px;
}

input[type="file"] {
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #2563eb;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


document.getElementById('htmlFileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file && file.type === 'text/html') {
    const reader = new FileReader();
    reader.onload = function(e) {
      const htmlContent = e.target.result;
      document.getElementById('pdf-content').innerHTML = htmlContent;
    };
    reader.readAsText(file);
  } else {
    alert('Please upload a valid .html file.');
  }
});

function generatePDF() {
  const element = document.getElementById('pdf-content');
  html2pdf()
    .set({
      margin: 1,
      filename: 'uploaded-html.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    })
    .from(element)
    .save();
}
We hope you would like this Calculator using html css and javascript code
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome