Печать только на 1 странице

Я работаю над удобным для печати css для веб-сайта. Он отлично просматривает/печатает в IE, но Firefox (версия 3.6) только просматривает/печатает первую страницу.

Кто-нибудь знает о чем-либо, что обычно вызывает это? Разметка довольно сложная, поэтому я не уверен, с чего начать!

Спасибо.

Edit

Это решение только усугубило ситуацию.

https://support.mozilla.com/ga-IE/info/667285#answer-115916

Похоже, печать печатается только в FF. Клиенту не понравится это слышать - надеюсь, что они не используют FF!

Ответы

Ответ 1

давняя ошибка с печатью абсолютно позиционированных элементов была исправлена ​​в Firefox 3.

Проблемы с отсутствующими страницами отслеживаются в ошибка 521204 (просмотрите список "зависит от" ). У вас есть кадры или длинные таблицы на странице, которую вы пытаетесь распечатать?

И да, печать в Firefox недоиспользуется, извините, вам нужно иметь дело с ней...

Ответ 2

Я только что узнал, что из элемента с

display:inline-block;

печатается только первая страница, и все остальное скрыто. установив это на

display:block;

было решением в моем случае.

Ответ 3

Если вы не хотите проходить весь свой код, это единственное, что я нашел, что работает для меня, не испортив все мои другие CSS:

@media print {
  body {
    overflow: visible !important;
  }
}

Ответ 4

У меня была такая же проблема. Оказывается, корневой тег имел display: flex. После изменения этого параметра на display: block отобразилась остальная часть содержимого. Я бы рекомендовал поднять ваше дерево DOM и проверить каждый атрибут display.

Ответ 5

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

@media print {
  body {
    display: block;
  }
}

Ответ 6

У меня была такая же проблема, потому что height из body установлен в 100%, после того как я изменил на height: auto в моем print.css, он сработал.

@media print {
  body {
    height: auto;
  }
}

Ответ 7

После многих исследований и испытаний и ошибок я нашел эту статью в списке. Я был настроен скептически, потому что он такой старый, но он утверждает, что:

Если элемент с плавающей точкой проходит мимо нижней части печатной страницы, остальная часть поплавка фактически исчезнет, ​​так как она не будет напечатана на следующей странице.

Поскольку у меня есть большой плавающий контейнер, я думал, что попробую. Итак, я сделал смесь из других ответов и этой статьи и придумал следующее:

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

Итак, в основном:

  • Настройка тела на overflow: visible
  • Элементы, которые ведут себя как обертки к display: block, удаляют все стили flex и reset height при необходимости
  • Устранить float на длинных контейнерах

Эта смесь работала для меня! Я так счастлив, что решил поделиться с вами:)

Ответ 8

Если вы не можете преодолеть ограничения Firefox при печати, вы можете преобразовать страницу в PDF. Если вы воспользуетесь этой опцией, Prince XML - это библиотека, которую я очень рекомендую. Он имеет очень хорошую поддержку CSS, включая печатные носители.

Ответ 9

для меня (bootstrap 4) решение было

@media print {
    .row {
      display: block;
    }
}

Ответ 10

следующие работы для меня.

@media print {
  .field--body table tr {
    display: table-row-group !important;
  }
}

Ответ 11

Firefox, безусловно, НЕ сосать в любом отношении. Однако иногда он более строго придерживается стандартов, чем другие браузеры. В любом случае, чтобы прервать погоню, у меня была та же проблема, то есть firefox печатал (также просматривал) только первые 2 страницы многостраничного отчета, построенного с длинной таблицей, созданной моей веб-страницей. После некоторой отладки я узнал, что я включил большую часть содержимого отчета внутри элемента span со стилем {display: inline-block;} между прочим. Как только я удалил, что разбиение на страницы было идеально...

Ответ 12

У меня была та же проблема, и я заменил положение из position:relative position: absolute с height: 100% от верхнего div до нижнего.

Ответ 13

Я попытался добавить @media print как предложено в этом ответе, в качестве определения style для элемента <body> страницы, но Firefox (60.0 (64-разрядная версия), Windows 7 64/Pro) по-прежнему урезал распечатку веб-сайта только для первой страницы.,

Затем я заметил флажок " Упростить страницу" в верхней части экрана предварительного просмотра Firefox: enter image description here

Когда я установил этот флажок, Firefox удалил некоторые стили, но экран предварительного просмотра обновился, чтобы включить все страницы на сайте!

Я не уверен, насколько широко применимо это так YMMV, но это стоит попробовать! До сих пор я не нашел сопоставимого решения для Chrome (версия 65.0.3325.162 (Официальная сборка) (64-разрядная версия)).

PS: из дальнейшего опыта я вижу, что Simplify Page удаляет не только стилизацию, но и некоторые целые элементы, такие как примеры кода, поэтому обязательно внимательно изучите результаты перед печатью.