jsPDF Tutorial to Export QRCode or Barcode to PDF Document Using jQuery in Browser Using Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<button id="download">Make Me A Beautiful PDF</button>
<div id="qr_code">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

 

 

script.js

 

 

$(document).ready(function() {

    var qrcode = new QRCode("qr_code", {
        text: "https://cravecookie.com/",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    $("#download").click(
        function() {
            var pdf = new jsPDF({
                orientation: "landscape",
                unit: "mm",
                format: [84, 40]
            });

            pdf.setFontSize(15);
            pdf.text('CraveCookie', 43, 20);

            pdf.setFontSize(10);
            pdf.text('Scan For Menu', 43, 25);

            let base64Image = $('#qr_code img').attr('src');
            console.log(base64Image);

            pdf.addImage(base64Image, 'png', 0, 0, 40, 40);
            pdf.save('generated.pdf');
        }
    );

});

 

 

style.css

 

 

button {
  padding: 20px;
  font-size: 20px;
}

#qr_code {
  display: none;
}

Leave a Reply