JS властивість CSSStyleDeclaration.pageBreakAfter

Загальний опис

element.style.pageBreakAfter – це властивість CSS, яка дозволяє контролювати, чи буде вставлений розрив сторінки після елемента при друці. Вона може приймати значення auto, always, avoid, left, right, inherit, initial, та unset.

Щоб використовувати element.style.pageBreakAfter в JavaScript, спочатку потрібно вибрати HTML-елемент, до якого ви хочете застосувати цю властивість. Найчастіше це робиться за допомогою методу document.querySelector або document.getElementById.

// Вибір елемента за ID
let element = document.getElementById('myElement');

// Встановлення розриву сторінки після елемента
element.style.pageBreakAfter = 'always';

У прикладі вище, розрив сторінки буде завжди вставлений після елемента з ID myElement при друку. Це корисно, коли потрібно починати нову сторінку після певного розділу документа.

Значення властивості

auto: Браузер сам вирішує, чи потрібно вставляти розрив сторінки після елемента.
always: Завжди вставляє розрив сторінки після елемента.
avoid: Уникає розриву сторінки після елемента, якщо це можливо.
left: Вставляє розрив сторінки після елемента, а наступна сторінка буде лівою.
right: Вставляє розрив сторінки після елемента, а наступна сторінка буде правою.
inherit: Успадковує значення від батьківського елемента.
initial: Встановлює значення за замовчуванням, яке є auto.
unset: Видаляє будь-яке задане значення, повертаючи властивість до її початкового стану.

Приклад використання з різними значеннями

let element1 = document.querySelector('.section1');
element1.style.pageBreakAfter = 'avoid';

let element2 = document.querySelector('.section2');
element2.style.pageBreakAfter = 'left';

У цьому прикладі, розрив сторінки після елемента з класом section1 буде уникнутий, якщо це можливо, а після елемента з класом section2 завжди буде вставлений розрив сторінки, і наступна сторінка буде лівою.

element.style.pageBreakAfter найчастіше використовується в контексті підготовки документів до друку, таких як звіти, статті, або будь-які інші друковані матеріали, де потрібно чітко контролювати розбивку контенту на сторінки. Встановлюючи різні значення цієї властивості, ви можете оптимізувати вигляд вашого документа при друці та зробити його більш читабельним.

// Повернення до значення за замовчуванням
let element3 = document.querySelector('.section3');
element3.style.pageBreakAfter = 'initial';

В цьому прикладі ми повертаємо властивість pageBreakAfter для елемента з класом section3 до її значення за замовчуванням, яке є auto.

Порада:

Використовуйте pageBreakAfter у динамічно створюваних документах. Якщо ваш сайт генерує документи на льоту (наприклад, рахунки, звіти), застосовуйте цю властивість для контролю розбивки сторінок у відповідних місцях. Це забезпечить, що ваші документи виглядатимуть професійно, незалежно від їх динамічного вмісту.

let dynamicSection = document.createElement('div');
dynamicSection.style.pageBreakAfter = 'always';
document.body.appendChild(dynamicSection);

Порада:

Не забувайте тестувати друкований вигляд ваших сторінок. Різні браузери можуть мати свої нюанси в обробці pageBreakAfter. Використовуйте функцію попереднього перегляду друку та перевіряйте розбивку сторінок у різних браузерах, щоб переконатися, що ваші налаштування працюють належним чином.

Порада:

Застосовуйте element.style.pageBreakAfter для створення друкованих версій складних веб-сторінок. Наприклад, якщо у вас є довгі списки або таблиці, розбивайте їх на сторінки, щоб уникнути обрізання контенту. Це зробить ваші документи більш професійними та зручними для читання.

let tableElements = document.querySelectorAll('table');
tableElements.forEach(table => {
    table.style.pageBreakAfter = 'always';
});

Синтаксис

element.style.pageBreakAfter

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

У цьому прикладі створюється довгий звіт, який складається з кількох розділів. Кожен розділ завершується автоматичним розривом сторінки при друці, що забезпечує чітку структуру документа та покращує його читабельність. Це особливо корисно для довгих звітів або дисертацій, де кожен розділ повинен починатися з нової сторінки.

// Створення довгого звіту з кількома розділами та автоматичним розривом сторінок після кожного розділу
let sections = [
    'Вступ',
    'Методологія',
    'Результати',
    'Обговорення',
    'Висновки'
];

sections.forEach(sectionTitle => {
    let section = document.createElement('div');
    section.innerText = sectionTitle;
    section.style.pageBreakAfter = 'always';
    document.body.appendChild(section);
});

Цей приклад показує динамічне створення інвойсів з автоматичним розривом сторінки після кожного інвойсу. Для кожного інвойсу створюється новий div, що містить номер інвойсу та список товарів. Розрив сторінки після кожного інвойсу забезпечує, що кожен інвойс друкується на окремій сторінці, що зручно для документів, які потрібно поділити на окремі частини при друці.

// Динамічне додавання елементів з розривом сторінки для створення інвойсів
let invoices = [
    { number: 1, items: ['Item 1', 'Item 2'] },
    { number: 2, items: ['Item 3', 'Item 4'] },
    { number: 3, items: ['Item 5', 'Item 6'] }
];

invoices.forEach(invoice => {
    let invoiceDiv = document.createElement('div');
    invoiceDiv.innerText = `Інвойс №${invoice.number}`;
    
    let itemList = document.createElement('ul');
    invoice.items.forEach(item => {
        let listItem = document.createElement('li');
        listItem.innerText = item;
        itemList.appendChild(listItem);
    });

    invoiceDiv.appendChild(itemList);
    invoiceDiv.style.pageBreakAfter = 'always';
    document.body.appendChild(invoiceDiv);
});

JS довідник

JavaScript

Наповнення JS розділу

JS властивість CSSStyleDeclaration.pageBreakAfter

Загальний опис

Значення властивості

Приклад використання з різними значеннями

Синтаксис

Значення

Return

Переглядачі

Приклади