Печатаю лотерейный билет. Проблемы с печатью с web-страницы. Проверка на целое число JS

Привет, йо-йо, алоха. Сегодня (13.05.2018) мне нужно было напечатать 350 лотерейных билетов. Эта задача была спонтанной. Не было ни бюджета ни времени, чтобы обратиться в типографию.

Сперва я хотел сделать всё в excel и даже создал шаблон, но как только я начал проверять макет на печати я увидел, что макет пополз. Таблица из которой я делал макет могла разделяться на несколько страниц. И я решил сделать это в html-е потому, что я его лучше знаю.

И так сейчас я вам расскажу как я создал примитивные лотерейные билеты и нормально их распечатал. Но сперва хочу вам представить мой новый проект. Я занимаюсь им вместе с коллегой. Там мы разбираем «тухлые» сайты и даём рекомендации. К вашему вниманию первый выпуск

Если вам понравилось подпишитесь на канал, нажмите на колокольчик и поставьте лайк).

Макет

Макет до боли простой, на нём я не буду останавливаться. Я просто сверстал таблицу и добавил немного стилей.

сторона участника	сторона для лототрона
briney.ru №88 *Главный приз — 1 год хостинга и домен в подарок. *Принимая участие в лотерее вы гарантированно получаете установку и настройку CRM Битрикс24.	Компания ФИО Должность Телефон Email №88

Обновления номерка

Мне конечно же нужно было создать уникальный номер для каждого билета. Для этого мне пришёл на помощь javascript. Я написал простою анонимную функцию.

(function(){
// Мой макет таблицы
	const table = document.querySelector('.mtt');
// Цикл для создания новых билетов
	for(i = 1; i < 351; i++){
		// Копирую мою таблицу
		let nef = table.cloneNode(true);
		// Получаю элементы в которых записывается номер 
		let numb = nef.querySelectorAll('.n');
		numb.forEach((e)=>{
// Меняю номер билета у 2-х элементов
			e.textContent = i;
		});
// Вставляю новый билет в body
		document.body.insertAdjacentElement('beforeend', nef);
	}
})();

Мой код создал мне все нужные билеты. Начал печатать, но увидел, что у меня сохранилась проблема с разрывом таблицы и получалось так, что билет печатался на двух страницах. Вот так:

Я подсчитал, что у меня происходит сдвиг каждые 6 элементов. Сначала я поигрался с отступами, но они не помогли т.к. принтер (или браузер) оптимизировал печать так, чтобы лишние пустоты не печатались. И я решил добавлять каждые 6 элементов блок.

Сложность была в написание алгоритма получение именно элемента который делиться на 6 и по порядку дальше на 5 элементов от первого.

Вышла такая функция

(function(){
	const table = document.querySelector('.mtt');
// Функция для проверки делиться число ровно на другое.
	function isIs(numder, del){
		let res = numder / del;
		if(res === Math.round(res)){
			return true;
		}
		return false;
	}
// Вспомогательная переменная
	start = -1;
	for(i = 1; i < 50; i++){
		
		let nef = table.cloneNode(true);
		
		let numb = nef.querySelectorAll('.n');
		numb.forEach((e)=>{
			e.textContent = i;
		});
		document.body.insertAdjacentElement('beforeend', nef);
// Нахожу порядковый номер элемента
		let del = i - start;
// Проверяю, что число не ноль и что оно ровно делиться на 6
		if(del !== 0 && isIs(del, 6)){
// Получаю margin-bottom моей таблицы
			let nM = parseFloat(nef.style.marginBottom) + 10;
			nef.style.marginBottom = nM + 'px';
// Добавляю вспомогательный элемент после таблицы
			document.body.insertAdjacentHTML('beforeend', '<hr style="height:4px;padding:0;">');
		}


	}
})();

Вуаля. Благодаря вспомогательному элементу я напечатал всё как нужно. Но это не всё.

Функция для определения целого числа в JS

В своей задаче я пошёл тупым путём. Я использовал самописную функцию

function isIs(numder, del){
		let res = numder / del;
		if(res === Math.round(res)){
			return true;
		}
		return false;
	}

Для определения целое число или нет я проверял округлённое число и число изначальное равны или нет. Хотя нужно было проверить через метод Number.isInteger. Тогда функция примет вид

function isIs(numder, del){
		let res = numder / del;
		return Number.isInteger(res);
	}

Всё просто. Надеюсь вам будет полезно)