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. Використовуйте функцію попереднього перегляду друку та перевіряйте розбивку сторінок у різних браузерах, щоб переконатися, що ваші налаштування працюють належним чином.

автор: Bond правити

Порада

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

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

автор: Bond правити

Порада

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.pageBreakAfter

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.2	7	12	4

Підтримка: мобільні переглядачі

Переглядач
	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);
});

// Динамічне додавання елементів з розривом сторінки для створення інвойсів
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);
});