Zenn
📑

QRコードを印刷　HTML＋JavaScript on CakePHP5

2024/01/31に公開
print
CakePHP 5
tech

CakePHP5 を只今使用中。

QRコードはこちらのライブラリで。

https://davidshimjs.github.io/qrcodejs/

58㎜幅のレシートプリンタが接続されている想定です。

印刷ボタン（呼び出す側）

<a class="btn btn-secondary btn-sm"
 target="_blank"
 href="<?= $this->Url->build('/kegs/qr/' . $ledger->keg) ?>"
><i class="fa-solid fa-print"></i>
</a>

単純に _blank でリンクを張ります。

印刷ページ（呼び出される側）

<?php
$this->disableAutoLayout();
?>
<html>
<body>
<script src="<?= $this->Url->build('/js/qrcode.min.js') ?>"></script>
<div id="qrcode"></div>
<div style="font-size:22px;"><?= $keg->keg ?></div>

<script type="text/javascript">
    new QRCode(document.getElementById("qrcode"),
        {text:"keg:<?= $keg->keg ?>", width:128, height:128,}
    );
    print();
    window.onafterprint = (event) => {
        window.close();
    };
</script>
</body>
</html>

ポイント

印刷ダイアログ終了イベント window.onafterprint がほとんどのブラウザで使えます。
印刷ダイアログでプリンタの選択まではJavascriptで操作できませんので、運用に任せます。

Discussion