0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

CakePHP5 を只今使用中。

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

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で操作できませんので、運用に任せます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?