стили напутали в печати - PullRequest
Новая
       15

стили напутали в печати

0 голосов
/ 15 марта 2019

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

Это медиа-запрос, который я использую, 

@media print {

    html {
        max-width: none;
        width:100%;
        float:left;
    }

    #nav-wrapper {
        display: none;
    }


    div.pageBreak {
        page-break-after: always !important;
    }


    @page{
        size: auto;
        margin: 0;
    }


    .landscape1 {
        transform-origin: top left;
        transform: translateY(1850px) rotate(-90deg);
        overflow-x: hidden;
        width: 1850px !important;
    }

    }

1 Ответ

1 голос
/ 15 марта 2019

Медиа-запросы предлагают сопоставление с ориентацией устройства: 

@media print and (orientation: landscape) {
    /* landscape styles */
}

@media print and (orientation: portrait) {
    /* portrait styles */
}

Работайте таким образом.

ИЛИ

Возможно, вы можете попробовать этот пользовательский CSS, который кто-то пробовалonline.

Вот правильный CSS, который работает в большинстве браузеров (Chrome, Firefox, IE9 +).

Сначала установите поле body в 0, потому что в противном случае поля страницы будут больше, чем те, которые вы используете.установить в диалоговом окне печати.Также установите цвет фона для визуализации страниц. 

body {
  margin: 0;
  background: #CCCCCC;
}

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

Заполнение должно быть установлено на требуемое поле печати.В диалоговом окне печати вы должны установить те же поля (в этом примере 10 мм). 

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

Размер страницы A4 составляет 210 мм x 297 мм.Вам нужно вычесть поля печати из размера.И установите размер содержимого страницы: 

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

Я использую 276 мм вместо 277 мм, потому что разные браузеры масштабируют страницы немного по-разному.Поэтому некоторые из них будут печатать содержимое высотой 277 мм на двух страницах.Вторая страница будет пустой.Более безопасно использовать 276 мм.

Нам не нужны поля, границы, отступы, фон на напечатанной странице, поэтому удалите их: 

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

Обратите внимание, что источник преобразованияэто 0 0!Кроме того, содержимое альбомных страниц должно быть перемещено на 276 мм вниз!

Кроме того, если у вас есть сочетание страниц портрета и пейзажа, IE будет уменьшать страницы.Мы исправим это, установив -ms-zoom в 1.665.Если вы установите значение 1,6666 или что-то в этом роде, правая граница содержимого страницы может иногда обрезаться.

Если вам нужна поддержка IE8- или других старых браузеров, вы можете использовать -webkit-transform, -moz-transform, фильтр: progid: DXImageTransform.Microsoft.BasicImage (вращение = 3).Но для достаточно современных браузеров это не требуется.

Вы хороши! !!

...