Install qrcode.react
:
terminalnpm i qrcode.react
At this point you can create the QR:
jsximport React from 'react' import QRcode from 'qrcode.react' const QR = () => { return <QRcode value = {'https://erikmartinjordan.com'}/> }
Now install jspdf
to create a pdf from the QR:
terminalnpm i jspdf
At this point you can add a function to download the QR as pdf:
jsximport React from 'react' import QRcode from 'qrcode.react' import { jsPDF } from 'jspdf' const QR = () => { const generatePDF = () => { // Defines the pdf let pdf = new jsPDF({ orientation: 'landscape', unit: 'mm', format: [40, 40] }) // Transforms the canvas into a base64 image let base64Image = document.getElementById('qrcode').toDataURL() // Adds the image to the pdf pdf.addImage(base64Image, 'png', 0, 0, 40, 40) // Downloads the pdf pdf.save('QR.pdf') } return ( <> <QRcode value = {'https://erikmartinjordan.com'} id = 'qrcode'/> <button onClick = {generatePDF}>Download pdf</button> </> ) }
Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.