Печать содержимого лайтбокса Перо, который загружается с помощью ajax - PullRequest
Новая
       18

Печать содержимого лайтбокса Перо, который загружается с помощью ajax

0 голосов
/ 15 февраля 2019

Моя веб-страница содержитколичество якорей, подобных этому: 

<a href="/ajax/training/{url_title}" data-featherlight="ajax" class="btn btn-sm btn-bw">More info</a>

Когда пользователь нажимает на якорь «Больше информации», он открывает лайтбокс Featherlight и заполняет содержимое с помощью вызова ajax.

Разметка внутри лайтбоксаэто довольно просто.Он содержит кнопку «Распечатать эту страницу», которая предназначена для печати содержимого внутри лайтбокса: 

<div class="ajax-training">
    <h3>Foo</h3>
    <p>Bar</p>
</div>

<div class="text-center">
     <button onclick="printWindow()" class="btn btn-primary">Print this page</button>
</div>

В лайтбоксе есть несколько js для обработки printWindow(): 

<script>
function printWindow() {
    window.print();
}
</script>

И немного CSS, чтобы не печатать кнопки «напечатать эту страницу» и Featherlight «закрыть»: 

<style media="print">
.btn, .featherlight-close-icon {
    display: none;
}
</style>

Это нормально работает с точки зрения заполнения лайтбокса, запуска функции печати и исключения печати кнопок.

Однако ... Если содержимое страницы превышает 1 страницу, будет напечатана только первая страница.Это происходит в разных браузерах и на разных машинах и работает согласованно.

Я не могу понять, почему это происходит, потому что я не добавил ни одного CSS, который бы это делал.Почему он обрезается после первой страницы?

Вот как это выглядит в предварительном просмотре после нажатия «Распечатать эту страницу».Я намеренно установил длину содержимого таким образом, чтобы он занимал 3 страницы формата А4.Он будет печатать только страницу 1, и если я попытаюсь ввести число страниц, превышающее 1 (т. Е. 2, 3, 2-3), выдается сообщение об ошибке:

Ссылка на страницу выходит за пределы,предел - 1

Я уже упоминал, что использую Bootstrap на случай возникновения каких-либо конфликтов или причин, которые могут вызвать такое поведение.Не существует CSS для конкретного приложения, нацеленного на media print или эквивалентный.Единственный CSS, который нацелен на .ajax-training (там, где находится контент) - это стиль заголовка и добавление отступов: 

.ajax-training {
    padding: 10px; 
}
.ajax-training h3 {
    font-weight: bold;
    color: #022169; 
}

enter image description here

Снимок экранапоказывает флажок «двухсторонний»;Я пробовал и с проверкой и без проверки, и это не имеет значения.

1 Ответ

0 голосов
/ 15 февраля 2019

Чтобы загрузить CSS для печати, необходимо указать, что либо весь файл предназначен специально для печати, либо что часть кода предназначена для печати с помощью медиазапроса.Ниже приведены примеры обоих решений:

Весь файл: 

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Медиа-запрос: 

@media print {
    background: red;
}

Так что для вас было бы просто создать дублирующую ссылку назагрузиться и добавить к нему media = "print":)

...