- エーオーシステム コーポレートサイト
https://www.aosystem.co.jp/ - エーオーシステム プロダクトサイト
https://ao-system.net/ - レンタルサーバー
- バーチャル展示会
- ウェブカタログサービス
- 3Dグラフィック
- Android アプリ
- iOS (iPhone,iPad) アプリ
- Flutter開発
- プログラミング記録QuickAnswer
- 無料画像素材
- スカイボックス 3D SKY BOX
このページのQRコード
/**
* 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);
}
}
})();
このページのQRコード
便利ウェブサイト
便利 Android アプリ
便利 iOS(iPhone,iPad) アプリ