Я пытаюсь напечатать div, который может быть очень длинным после добавления содержимого динамического c внутри, и в настоящее время я объявил CSS @print свойства запроса для печати только этого div в моем html на бумаге формата A4,
. Он отлично работает и работает очень хорошо, когда длина содержимого меньше длины страницы A4, но как только содержимое становится длиннее, чем длина A4, версия для печати по-прежнему показывает одна страница, и он захватывает только контент, который может быть размещен на странице А4 только , остальная часть лота обрезается.
Я хочу автоматически разбить страницу, когда содержимое попадает на нижняя часть страницы. Я часами пробовал, гуглил и тестировал. (Chrome / Firefox / Opera показывает одинаковый результат)
@media print {
@page {
size: 4.4in 11.69in;
/* custom width which I use for printing */
margin: 0 auto;
}
/* app-home is the parent component */
app-root app-home>* {
display: none !important;
/*As I want to print only the div which is mentioned below */
}
/* app-preview component which holds the div to be printed */
app-root app-home app-preview,
app-root app-home app-preview>* {
display: block !important;
position: fixed;
overflow: visible !important;
break-inside: auto !important;
break-after: auto !important;
}
/* div with class of canvas - The div to be printed */
/* div with class of outer is a parent div */
app-root app-home app-preview div.outer div.canvas {
display: block !important;
overflow: visible !important;
break-inside: auto !important;
break-after: auto !important;
}
}
Примечание: Содержимое div находится внутри компонента Angular 8 приложения . + фактический контент находится в table внутри этого div. Упомянутые стили находятся в основном файле styles.css.
Предварительный просмотр, как показано в Chrome - 
Остальное обрезается и не прерывается на другую страницу, как и должно быть. Любая идея о том, что не так с моим кодом?
Любая помощь будет оценена!