ビンゴカードPDF出力

Output bingo cards as PDF

Output bingo cards as PDF

ビンゴカードPDF出力

JavaScriptでビンゴカードを生成。PDF出力。JavaScriptで完結しています。ウェブサーバーには何もアップロードされません。商用無料。個人使用も無料

JavaScriptでPDF出力を実装する方法
JavaScriptだけでpdfファイルを出力できるオープンソースのライブラリ「PDF-LIB」を使用しました。
テンプレートになるPDFを読み込み、追記してPDF出力しています。
日本語フォントの読み込みと指定により、日本語出力もできます。
ページの原点(0,0)は左下になります。ページの最大値は右上で、この値は { width, height } = page.getSize(); で得ています。
印字位置は右上を100%とした割合で指定しています。
現時点のコードは以下の通り:
/**
 * bingo card pdf
 *
 * author ao-system, Inc.
 * date 2024-05-06
 *
 * PDF-LIB が必要
 * https://pdf-lib.js.org/
 */
(() => {
	new class {
		'use strict';
		#URL_PDF = './file/bingocard6.pdf';
		#generate = document.getElementById('generate');
		#pdf = document.getElementById('pdf');
		#cardArea = document.getElementById('cardArea');
		#printPositions = [
			{x:0.16, y:0.844},	{x:0.563, y:0.844},
			{x:0.16, y:0.557},	{x:0.563, y:0.557},
			{x:0.16, y:0.271},	{x:0.563, y:0.271},
		];
		#printStep = {x:0.060, y:-0.042};
		#printSingleSpace = 0.011;
		#numbers = [
			Array.from({length: 15}, (_, i) => i + 1),
			Array.from({length: 15}, (_, i) => i + 16),
			Array.from({length: 15}, (_, i) => i + 31),
			Array.from({length: 15}, (_, i) => i + 46),
			Array.from({length: 15}, (_, i) => i + 61),
		];
		#results = [];
		constructor() {
			this.#init();
			this.#generate.addEventListener('click',() => {
				this.#init();
			});
			this.#pdf.addEventListener('click',() => {
				this.#pdfOut();
			});
		}
		#init() {
			this.#createNumbers();
			this.#displayCard();
		}
		#createNumbers() {
			this.#results = [];
			for (let n = 0; n < 6; n++) {
				for (let k = 0; k < 5; k++) {
					for (let i = this.#numbers[k].length - 1; i > 0; i--) {
						const j = Math.floor(Math.random() * (i + 1));
						[this.#numbers[k][i], this.#numbers[k][j]] = [this.#numbers[k][j], this.#numbers[k][i]];
					}
				}
				const ary = this.#numbers.map(array => array.slice(0, 5));
				this.#results.push(ary);
			}
		}
		#displayCard() {
			this.#cardArea.innerHTML = '';
			for (let i = 0; i < this.#results.length; i++) {
				this.#bingoCard(this.#results[i]);
			}
		}
		#bingoCard(cardAry) {
			const table = document.createElement('table');
			const thead = document.createElement('thead');
			thead.innerHTML = '<tr><th>B</th><th>I</th><th>N</th><th>G</th><th>O</th></tr>';
			table.appendChild(thead);
			const tbody = document.createElement('tbody');
			for (let y = 0; y < 5; y++) {
				const tr = document.createElement('tr');
				for (let x = 0; x < 5; x++) {
					const td = document.createElement('td');
					td.textContent = (y == 2 && x == 2) ? 'F' : cardAry[x][y];
					tr.appendChild(td);
				}
				tbody.appendChild(tr);
			}
			table.appendChild(tbody);
			this.#cardArea.appendChild(table);
		}
		#pdfOut() {
			const { PDFDocument, rgb } = PDFLib;
			(async (_this) => {
				const existingPdfBytes = await fetch(_this.#URL_PDF).then(res => res.arrayBuffer());
				const pdfDoc = await PDFDocument.load(existingPdfBytes);
				const pages = pdfDoc.getPages();
				const page = pages[0];
				const { width, height } = page.getSize();
				for (let n = 0; n < _this.#printPositions.length; n++) {
					for (let y = 0; y < 5; y++) {
						for (let x = 0; x < 5; x++) {
							if (y != 2 || x != 2) {
								const num = _this.#results[n][x][y];
								const singleChar = num < 10;
								const str = String(num);
								page.drawText(str, {
									x: (_this.#printPositions[n].x * width) + (x * _this.#printStep.x * width) + (singleChar ? _this.#printSingleSpace * width : 0),
									y: (_this.#printPositions[n].y * height) + (y * _this.#printStep.y * height),
									size: 20,
								});
							}
						}
					}
				}
				const pdfBlob = new Blob([await pdfDoc.save()],{type: 'application/pdf'});
				const url = URL.createObjectURL(pdfBlob);
				const fileName = 'bingo' + String(Math.floor(Date.now() / 1000)) + '.pdf';
				const a = document.createElement('a');
				a.href = url;
				a.download = fileName;
				a.click();
			})(this);
		}
	}
})();
出力したPDFを印刷して、ペンを用意すればビンゴ大会を開催できます。
ビンゴ抽選機はこちら
ビンゴ抽選機 オリジナル版
ビンゴ抽選機 パーティ版
ビンゴ抽選機 カジノ版
ビンゴ抽選機 青い空と青い海版
ビンゴ抽選機 カラフルルーム版
ビンゴ抽選機 白い部屋版
ビンゴ抽選機 緑の部屋版
ビンゴ抽選機 腕時計版
ビンゴ抽選機 3D版
様々な便利アプリはこのページ下部に表示。
この記事は2024年5月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。