😀

laravel 二次元コード作成ダウンロード

2023/05/17に公開

Laravel

今回は二次元コードを作成とダウンロードを行ったので
手順やコードを記載します。

composer require simplesoftwareio/simple-qrcode
を実行させて、qrcodeのパッケージをインストールします。

Routes/web.php
には下記を追加しましょう

web.php

use App\Http\Controllers\QrCodeController;



Route::get('/qrcode', [QrCodeController::class, 'index']);

下記コマンドでコントローラーを作成します。
php artisan make:controller QrCodeController

QrCodeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class QrCodeController extends Controller
{
    public function index()
    {
      return view('qrcode');
    }

}

Resource/views/ディレクトリに
qrcode.blade.phpを作成しましょう

qrcode.blade.php

<!@php
    $url = "https://www.google.com";
@endphp

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>How to Generate QR Code in Laravel 8</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

    <div class="container mt-4">

        <div class="card">
            <div class="card-header">
                <h2>Simple QR Code</h2>
            </div>
            <div class="card-body">
                <img id="qrcode" src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->generate($url)) !!}">
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-body">
                <button id="download-btn">Download QR code</button>
            </div>
        </div>

    </div>

    <script>
        var downloadBtn = document.getElementById('download-btn');//htmlのdownload-btnの要素を格納
        var qrcodeImg = document.getElementById('qrcode');        //htmlのqrcode

        //下記一行はdownload_btnをクリックしたときの動作を記載しますよという意味
        downloadBtn.addEventListener('click', function() {
            var downloadLink = document.createElement('a');//ハイパーリンクを作成宣言(aタグ)
            downloadLink.href = qrcodeImg.src;//qrcode->qrcodeImgのsrcの部分のリンクを格納してる
            downloadLink.download = 'qrcode.png';//download時のファイル名を記載
            
            // ダウンロードの確認ダイアログを表示する
            if (confirm('二次元コードをダウンロードしていいですか?')) {
                downloadLink.click();//実行するという意味のコード
            }
        });
    </script>

    
</body>
</html>

QRコードの表示とダウンロードボタンをクリックしたときにjavascriptでダウンロードできるようになっている。

javascriptの

画像は「 base64_encode 」でエンコードしてあげないと表示できいので注意。

Discussion