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

Output bingo cards as PDF

Output bingo cards as PDF

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

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);
		}
	}
})();
様々なビンゴカードが有ります。
ビンゴカード01
ビンゴカード02
ビンゴカード03
ビンゴカード04
ビンゴカード05
ビンゴカードPDF出力(印刷用) A4用紙に6個
ビンゴカードPDF出力(印刷用) A4用紙に2個
その他様々な抽選機能が有ります。
ビンゴ抽選機 オリジナル版
ビンゴ抽選機 ジグソーパズル版
ビンゴ抽選機 パネル版
ビンゴ抽選機 ホイール版
ビンゴ抽選機 クリスマス版
ビンゴ抽選機 ハロウィン版
ビンゴ抽選機 お正月版
ビンゴ抽選機 3D版
Bingo machine 90 balls
Bingo machine 3D. 90 balls
抽選機。万能タイプ
ガラガラ抽選機
三角くじ。祭りくじ
スロット抽選機
ニキシー管抽選機
様々な便利アプリはこのページ下部に表示。
この記事は2024年5月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。