🧾

jsでQRコードを生成してSVGとして保存する

2024/05/28に公開

JavaScript

タイトルの通り、QRコードを生成してSVGで保存できる仕組みが必要になったので作成しました。
※自分用のメモです

使用したライブラリ

ライブラリの追加

npm install qrcode-generator
or
yarn add qrcode-generator

記述方法

HTML

...省略...
<div id="qr_place_holder"></div>
<button id="generate_button">生成</button>
...省略...

import qrcode from 'qrcode-generator';

class App {
    constructor() {
        document.getElementById('generate_button').addEventListener('click', this.onClick);
	}
    onClick = () => {
        // QRコード生成
        var qr = qrcode(0, 'L');
        qr.addData("Hi");　// 文字列の指定
        qr.make(); // QR generate
        const placeHolder = document.getElementById('qr_place_holder');
        placeHolder.innerHTML = qr.createSvgTag();
        
        // 画面に表示するsvgサイズ
        const svgElement = placeHolder.getElementsByTagName('svg')[0];
        svgElement.style.width = '500px';
        svgElement.style.height = '500px';
        
        // XMLSerializerを使用してSVGエレメントを文字列に変換
        const serializer = new XMLSerializer();
        const svgString = serializer.serializeToString(svgElement);
        
        // Blobを作成
        const blob = new Blob([svgString], { type: 'image/svg+xml' });
        
        // BlobからObject URLを作成
        const url = URL.createObjectURL(blob);
        
        // ダウンロードリンクを作成
        const link = document.createElement('a');
        link.href = url;
        link.download = 'image.svg'; // 保存するファイル名を設定
        
        // ダウンロードリンクをクリック
        link.click();
        
        // Object URLを解放
        URL.revokeObjectURL(url);
    }
}

qr.addData("Hi");　// 文字列の指定

ここを、好きな文字列に変更して使用してください。

最後に

雑に書いたので、ミスあれば教えて下さい！

使用したライブラリ

ライブラリの追加

記述方法

最後に

Discussion