QR Code Generator | Download PDF QR Code

Busy Order
🎨 Colorful QR Code Generator – Full Tutorial

🎨 Colorful QR Code Generator

Create a beautiful custom QR code and download it as a PDF

Introduction

QR codes are everywhere — from restaurant menus to event tickets. But plain black-and-white QR codes aren’t always exciting. In this tutorial, we’ll create a colorful QR Code Generator

HTML Structure

Here’s the basic HTML layout for our generator:

<div class="container">
  <h1>🎨 Colorful QR Code Generator</h1>
  <input type="text" id="urlInput" placeholder="Paste your URL here..." />
  <button onclick="generateQRCode()">Generate QR Code</button>
  <div id="qrCode"></div>
  <div id="qrActions" style="display:none;">
    <button onclick="downloadAsPDF()">📄 Download as PDF</button>
  </div>
</div>

CSS Styling

We’ll make the UI modern and colorful with gradients and rounded corners.

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
}
.container {
  background: rgba(255, 255, 255, 0.15);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
}

JavaScript Functionality

let qr;
function generateQRCode() {
  const url = document.getElementById('urlInput').value.trim();
  const qrContainer = document.getElementById('qrCode');
  const actions = document.getElementById('qrActions');

  if (!url) {
    alert("Please enter a URL!");
    return;
  }
  qrContainer.innerHTML = "";
  qr = new QRCode(qrContainer, {
    text: url,
    width: 200,
    height: 200,
    colorDark: "#2575fc",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
  actions.style.display = "block";
}
function downloadAsPDF() {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  const qrImage = document.querySelector('#qrCode img') || document.querySelector('#qrCode canvas');
  let qrDataUrl = qrImage.tagName.toLowerCase() === 'img' ? qrImage.src : qrImage.toDataURL("image/png");
  doc.text("QR Code", 90, 20);
  doc.addImage(qrDataUrl, "PNG", 50, 30, 110, 110);
  doc.save("QRCode.pdf");
}

Live Demo


© 2025 Busy Order | Written by Krithiga | QR Code Tools & Tutorials

0 Comments