Не показывает before/after элементы при печати

Question

Почему не показывает before/after элементы(графики) когда делается печать? Есть какое то решения ? весь контент отображается при печати, но все что находится в before\after не отображается.

function printdiv() {
   let printResume = pupMenu.children[0].innerHTML;
   document.body.innerHTML = printResume;
   window.print();
   location.reload()
}

Напишите вопрос внятно и без ошибок, сейчас невозможно понять что здесь написано — andreymal, Jan 09 '21 at 20:48
Вы точно поняли что написали? Какой print, куда нажато, причем тут элементы before/after/ и наконец куда это должно быть показано? Что вы делали для того, что бы это было показано, хоть код дайте... — WalkMess, Jan 09 '21 at 20:11
@СерегаМангышев чуть дополнил, думаю будет понятно теперь) — Maksym Gapachilo, Jan 09 '21 at 23:31
@andreymal чуть дополнил, думаю будет понятно теперь) — Maksym Gapachilo, Jan 09 '21 at 23:31
@Qwertiy в дубликате ничего не сказано про print — andreymal, Jan 09 '21 at 23:35
@andreymal, надо в девтулах включить эмуляцию media print, а дальше по дубликату. — Qwertiy, Jan 10 '21 at 11:27

score 1 · Accepted Answer · answered Jan 10 '21 at 12:01

let printResume = pupMenu.children[0].innerHTML;
document.body.innerHTML = printResume;

Эта попытка сэкономить на написании стилей для печати весьма неудачна.

Заменяя всё body на некоторый элемент, ты вынимаешь его из иерархии, соответственно все стили, унаследованные от родительских элементов кроме body, гарантированно исчезают. Одновременно с этим перестают работать все css-селекторы, которые знают о размещении этого элемента внутри других. А ещё таким кодом можно даже поломать разметку.

Вот тут есть инструкция по отладке стилей но в твоём случае её стоит применять после выполнения процитированного куска кода.

Впрочем, лучше снести этот код, и заменить на добавление специального класса единственному div'у и написанные для @media print стили, которые будут отображать страницу в таком виде, что виден будет только элемент с соответствующим классом и он будет занимать всю страницу. Это надо писать под конкретные стили и конкретную разметку.

score 0 · Answer 2 · answered Jan 09 '21 at 20:40

0

Потому что у вас в CSS в @media print { /*...*/ } ничего не добавлено. Вот и подгружается дефолтная CSS. Плюс включите галочку Печать фона в диалоге настройки печати.

answered Jan 09 '21 at 20:40

DiD

7,606

Ну я через js делаю body.print(). Да если включить Печать фона єлементи before/after показывает. Но много кто не знает, и другой человек хочет печать сделать и ему сразу не будет показывать, как то можно исправить? не заменяя before/after? – Maksym Gapachilo Jan 09 '21 at 23:27
Нужно скопировать все правила CSS в @media print { /*...*/ } вместо /*...*/ подставьте текущий код CSS. – DiD Jan 10 '21 at 05:02
@DiD, что за бред? Все написанные стили распространяются на все media если автор явно не прописал иное. А если прописал, то копипаст, да ещё и всего - самый дурацкий вариант. – Qwertiy Jan 10 '21 at 11:52
К тому же, не поможет. Я понял, в чём косяк в приведённом коде. – Qwertiy Jan 10 '21 at 11:53
@Qwertiy Ну я точно не могу определить какие библиотеки/фреймворки использует автор, но большинство из них имеет отдельные стили для печати. – DiD Jan 10 '21 at 11:58
@DiD, я уже понял, в чём проблема и написал ответ. – Qwertiy Jan 10 '21 at 12:02
@Qwertiy Смотрите, даже в текущей странице в версии для печати отсутствуют, например, иконки медалек под никами https://ibb.co/khB1rQY – DiD Jan 10 '21 at 12:13
@DiD, если поставить флажок фон, то присутствуют: https://i.stack.imgur.com/o5n6x.png PS: И загружай картинки на SO лучше. – Qwertiy Jan 10 '21 at 12:37

Не показывает before/after элементы при печати

2 Answers2