PagedJS в Vue 3 игнорирует попытки разрыва страницыCSS

Разбираемся в CSS
Ответить
Anonymous
 PagedJS в Vue 3 игнорирует попытки разрыва страницы

Сообщение Anonymous »

Я пытался реализовать разрывы страниц в Vue.js 3. Я использовал следующий CSS, похоже, он работает, потому что я могу изменить заголовок страницы, например центрировать/не центрировать его. Однако параметр класса «.page-break», похоже, ускользает от меня. Вы можете увидеть все мои попытки заставить это работать ниже. Никакой другой внешний импорт CSS не используется. Я использую Vue-Showdown для преобразования уценки в HTML.
Ни одна из попыток разрыва страницы, которые вы можете увидеть ниже, на самом деле не работает, и я очень озадачен тем, почему это не так.
p>
*Обратите внимание, что это работает, если я не отправляю его в PagedJS, как непосредственно функцию печати.
Мой вариант использования заключается в том, что мне нужно использовать PagedJS для создания постраничного контента для обновления моего оглавления номерами страниц, которые я потом распечатаю.
Я ломаю голову, почему это не работает.

Код: Выделить всё

@page {
size: A4;
margin: 20mm;
@bottom-right-corner {
vertical-align: center;
text-align: center;
background: #fafafa;
color: purple;
content: "P. " counter(page);
}
}

h1 {
break-before: page;
page-break-before: always;

}

.pagedjs_page {
break-before: page;
page-break-before: always;

}

@media print {
h1, h2 {
break-before: page;
page-break-before: always;

}
.page-break {
break-before: page;
page-break-before: always;

}
}

@media screen {
h1, h2 {
break-before: page;
page-break-before: always;

}
.page-break {
break-before: page;
page-break-before: always;

}
}

table, figure {
page-break-inside: avoid; /* Avoid breaking these elements across pages */
}

.title-page {
break-after: always;
page-break-before: always;
text-align: center;
padding-top: 60mm;
}

.page-break {
break-before: page;
page-break-before: always;

}

.content-page {
padding: 15mm 20mm;
}

img {
max-width: 100%;
height: auto;
display: block;
margin: 10mm auto;
} 

Код: Выделить всё

${titleContent}
${restOfContent.innerHTML}


Я пробовал манипулировать разрывами страниц, используя разные форматы и типы, но это вроде ничего не ломается.

Подробнее здесь: https://stackoverflow.com/questions/784 ... k-attempts
Ответить

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

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

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

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

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