Проблема с разрывом страницы в laravelCSS

Разбираемся в CSS
Ответить
Anonymous
 Проблема с разрывом страницы в laravel

Сообщение Anonymous »

Я столкнулся с проблемой разрывов страниц при печати HTML-документа с помощью функции printDiv(), вызываемой кнопкой. Содержимое перекрывается или неправильно распределяется между разделами, что приводит к проблемам с форматированием.
Я пробовал настроить поля и размер страницы с помощью правил CSS @page, но проблема не устранена. Вот фрагмент, который я использовал для настройки полей:
Я столкнулся с проблемой. где я не могу использовать разрыв страницы в этом коде, я использую laravel. Может ли кто-нибудь помочь мне в этом вопросе? Я пробую это уже от 3 до 5 дней. Спасибо.
Какие изменения следует внести, чтобы каждый раздел () в printableArea начинался с новой страницы при печати? Существуют ли какие-либо особые свойства CSS или настройки для печати, которые мне следует рассмотреть для решения этой проблемы?
Print

{{-- Header Section --}}


{{-- Logo Section --}}
@if ($layoutSetting->logo != 'off')

@endif

{{-- Document Id and Date/Time --}}


{{-- Subject , To and info section --}}

{{-- Document Content section --}}

{{-- Reference File Links section --}}

{{-- E Sign and QR code section --}}




.printableArea {
padding: 5mm;
box-sizing: border-box;
border: 1px solid #000;
margin-bottom: 20px;
}

.bgImage {
position: absolute;
top: 440px;
opacity: 0.2;
width: 96%;
height: 19vh;
left: 15px;
}

@media print {
body * {
visibility: hidden;
}

.printableArea,
.printableArea * {
visibility: visible;
}

.printableArea {
margin: none;
border: none;
}

.headerImg {
position: fixed;
width: 110.6%;
height: 19vh;
margin-left: -10px;
margin-top: -37px;
}

.bgImage {
position: absolute;
top: 440px;
opacity: 0.2;
width: 96%;
left: -10px;
}

.printableArea .btn,
.printableArea a {
display: none;
}
.references a {
display: block !important; /* Use !important to ensure the rule takes precedence */
}
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... in-laravel
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»