Downloading QRCode in SVG

July 22, 2022

I’m using the EasyQRCodeJS plugin but I am finding it hard to download/save the QR Code to my device in an SVG format.

Here’s the code I am using. It’s creating and displaying the QR Code fine displaying but the file will not open so I am doing someone incorrectly.

// Options
    var options = {
        text: "https://github.com/ushelp/EasyQRCodeJS",
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
    logo: "https://assets.website-files.com/6130bd1fcd31de20d9599493/627b6e7e75f1c5ef5f36ff22_customjava.svg", 
    logoWidth: 50, // fixed logo width. default is width/3.5
    logoHeight: 50, // fixed logo height. default is heigth/3.5,
    crossOrigin : 'anonymous',
    quietZone: 0,
    quietZoneColor: "rgba(0,0,0,0)",
    drawer: 'svg',
    logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when logBgTransparent is true; default is '#ffffff'
    logoBackgroundTransparent: false, // Whether use transparent image, default is false
    };
    
    // Create QRCode Object
    new QRCode(document.getElementById("qrcode"), options);
  







function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

// Start file download.
document.getElementById("button").addEventListener("click", function(){
/* alert(QRCode); */
    var text = QRCode;
    var filename = "qrcode.svg";
    
    download(filename, text);
}, false);

<script src="https://cdn.jsdelivr.net/npm/easyqrcodejs@4.4.12/dist/easy.qrcode.min.js"></script>
<div id="qrcode"></div>
<input type="button" id="button" value="Download" />

>Solution :

var text = QRCode; won’t return your svg code but the QRCode object.

Add a element variable and fetch it’s innerHTML like so:

var text = qrcodeEl.innerHTML;

Example

// Options
var options = {
  text: "https://github.com/ushelp/EasyQRCodeJS",
  width: 200,
  height: 200,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
  logo: "https://assets.website-files.com/6130bd1fcd31de20d9599493/627b6e7e75f1c5ef5f36ff22_customjava.svg",
  logoWidth: 50, // fixed logo width. default is width/3.5
  logoHeight: 50, // fixed logo height. default is heigth/3.5,
  crossOrigin: "anonymous",
  quietZone: 0,
  quietZoneColor: "rgba(0,0,0,0)",
  drawer: "svg",
  logoBackgroundColor: "#fffff", // Logo backgroud color, Invalid when logBgTransparent is true; default is '#ffffff'
  logoBackgroundTransparent: false // Whether use transparent image, default is false
};

const qrcodeEl = document.getElementById("qrcode");
const QR = new QRCode(qrcodeEl, options);

function download(filename, text) {
  var element = document.createElement("a");
  console.log(text);
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

// Start file download.
document.getElementById("button").addEventListener(
  "click",
  function() {
    /* alert(QRCode); */
    var text = qrcodeEl.innerHTML;
    console.log(text)
    var filename = "qrcode.svg";
    download(filename, text);
  },
  false
);

<script src="https://cdn.jsdelivr.net/npm/easyqrcodejs@4.4.12/dist/easy.qrcode.min.js"></script>
<div id="qrcode"></div>
<input type="button" id="button" value="Download" />

Download won’t work in SO snippet due to security settings.