ビンゴカードPDF出力 A4用紙に2個

Output bingo cards as PDF

Mタイプ

ビンゴカードPDF出力 A4用紙に2個

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/bingocard2.pdf';
		#generate = document.getElementById('generate');
		#pdf = document.getElementById('pdf');
		#cardArea = document.getElementById('cardArea');
		#printPositions = [
			{x:0.286, y:0.796},
			{x:0.286, y:0.367},
		];
		#printStep = {x:0.090, y:-0.063};
		#printSingleSpace = 0.021;
		#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 < 2; 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: 35,
								});
							}
						}
					}
				}
				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);
		}
	}
})();
 
ビンゴは3タイプ有ります
ビンゴ大会開催システム(Wタイプ)
抽選機とカードが相互通信します。商用利用に最適。抽選結果がカードに自動反映。カードから抽選機へメッセージ送信。
ビンゴ(Pタイプ)
抽選結果がカードに自動反映されます。
ビンゴ(Mタイプ)
全てマニュアル操作です。抽選機だけを使用したい場合やカードだけを使用したい場合に適しています。
ビンゴ大会開催システム(Wタイプ)
ビンゴ大会開催システム(Wタイプ) 抽選機
ビンゴ大会開催システム(Wタイプ) カード
ビンゴ(Pタイプ)
ビンゴ(Pタイプ) 抽選機
ビンゴ(Pタイプ) カード多言語対応
ビンゴ(Pタイプ) カード02
ビンゴ(Pタイプ) カード03
ビンゴ(Pタイプ) カード04
ビンゴ(Pタイプ) カード05
ビンゴ(Mタイプ)
ビンゴ抽選機 オリジナル版
ビンゴ抽選機 ジグソーパズル版
ビンゴ抽選機 パネル版
ビンゴ抽選機 ホイール版
ビンゴ抽選機 ライン版
ビンゴ抽選機 アウトライン版
ビンゴ抽選機 ジッパー(ファスナー)版
ビンゴ抽選機 クリスマス版
ビンゴ抽選機 ハロウィン版
ビンゴ抽選機 お正月版
ビンゴ抽選機 桜版
ビンゴ抽選機 ひまわり版
ビンゴ抽選機 3D版
Bingo machine 90 balls
Bingo machine 3D. 90 balls
ビンゴ スコアボード
ビンゴカード01
ビンゴカード02
ビンゴカード03
ビンゴカード04
ビンゴカード05
ビンゴカードPDF出力(印刷用) A4用紙に6個
ビンゴカードPDF出力(印刷用) A4用紙に2個
 
その他様々な抽選機能が有ります。
抽選機。万能タイプ
ガラガラ抽選機
三角くじ。祭りくじ
スロット抽選機
ニキシー管抽選機
様々な便利アプリはこのページ下部に表示。
2024年7月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。