【Django】QRコード生成 + HTML表示

DjangoでQRコードを生成して、ファイルなどには特に保存せずにフロント側HTMLで表示する方法を記載します。

実装手順

pillowとqrcodeのライブラリを下記のコマンドでインストールします。

・pillow

pip install pillow

・qrcode

pip install qrcode

view.pyに下記のようにインストールしたライブラリをimportします。

from PIL import Image
import qrcode
import base64

また、生成したQRコードをhtml側で表示できるようにするための下記のライブラリもimportしておきます。インストールは不要です

from io import BytesIO

view.pyでQRコードを生成するコードを実装します。

はじめに、QRコードを生成し、変数に格納します。

img = qrcode.make(QRコードにしたい文字列など)

下記のコードで生成したqrコードをbase64という形式に変換してhtmlで表示できるようにします。

buffer = BytesIO()
img.save(buffer, format="PNG")
qr = base64.b64encode(buffer.getvalue()).decode().replace("'", "")

最後にdjangoからフロントエンドに生成したqrコードを返してあげます。

例えば以下のような感じです。

param = { 'qr': qr}
return render(request, 表示するhtml, param)

imgタグで表示できます。

<img src="data:image/png;base64,{{ qr }}"/>

src属性の最初にこのbase64形式はpng形式ですよという印を記載し、Djangoから返したオブジェクトを記載してあげます。

これで、qrコードをブラウザで表示できるようになります。

QRコードを生成してファイルに保存するなどの記事は多くあったのですが、生成してファイルに保存せずにhtmlで表示する記事が意外になかったので自分のためにも記事にしてみました。

参考にしてみてください。