In questo articolo vedremo come creare un QR code in ExpressJS.

Installiamo il package NPM richiesto.


npm install qrcode --save

Questo modulo può creare file PNG sia come URL di dati che come file veri e propri. Definiamo quindi una funzione di utility per la gestione dei file.


'use strict';

const fs = require('fs');
const util = require('util');

const exists = util.promisify(fs.access);

module.exports = {
    fileExists(path) {
        return new Promise((resolve, reject) => {
            exists(path, fs.F_OK).then(ok => {
                resolve(true);
            }).catch(err => {
               resolve(false);
            });
        });
    }
};

Definiamo quindi una route con una logica condizionale: se la richiesta GET viene effettuata con AJAX, viene generato un URL di dati, altrimenti viene servito il file PNG creato.


'use strict';

const fs = require('fs');
const path = require('path');
const express = require('express');
const QRCode = require('qrcode');
const utils = require('./utils');
const app = express();
const port = process.env.PORT || 3000;

app.disable('x-powered-by');
app.use('/public', express.static(path.join(__dirname, 'public')));

app.get('/qrcode', async (req, res) => {
    try {

        const qrCodeText = 'https://site.tld';

        if(req.xhr) {
            const url = await QRCode.toDataURL(qrCodeText);
            res.json({url});
        } else {
           const src = './public/images/qrcode.png';
           const exists = await utils.fileExists(src);
           if(!exists) {
               const stream = fs.createWriteStream(src);
               const code = await QRCode.toFileStream(stream, qrCodeText);
           }
           res.sendFile(src);
        }
    } catch(err) {
        res.json(err);
    }
});

app.listen(port);

Un uso tipico della modalità AJAX è quello che prevede che il QR code venga visualizzato in modo asincrono come nel seguente esempio.


"use strict";

$(function() {
    $.get( "/qrcode", function( response ) {
        $( "#qrcode-image" ).attr( "src", response.url ).show();
    });
});