Блог

Главная - Вопросы по программированию - Невозможно избавиться от полей страницы, верхнего и нижнего колонтитулов при печати в IE

Невозможно избавиться от полей страницы, верхнего и нижнего колонтитулов при печати в IE

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

У меня есть страница, она содержит кнопку «Вид для печати», при нажатии на которую все содержимое будет автоматически заполнено в модальный режим начальной загрузки.

Этот модал содержит кнопку «Печать», при нажатии на которую модал будет напечатан, а не страница.

Ниже приведен CSS,

 @media print{
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; /* make visible modal body and header */
    }

    body.modal-open .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        overflow: visible!important;
    }
}

JS,

 $('#modal-Printbtn').click(function(){
        window.print();
});

Поскольку это модальный режим с длинной прокруткой, я добавил ‘Overflow: visible’. Теперь проблемы,

1. Поля и верхние и нижние колонтитулы :

а) В Chrome,

Я пытался 

 @media Print{ 
    @page {margin:0; }
}

это также удалило верхние и нижние колонтитулы и поля. Это хорошо.

б) В IE,

Приведенный выше CSS вообще не отражается, поля существуют вместе с верхними и нижними колонтитулами.

2. Дополнительные страницы :

Как в IE, так и в Chrome,

Даже если содержимое помещается на 6 страницах печати, в конце всегда добавляются 2 дополнительные страницы. Я перепробовал все виды свойств разрыва страницы, ни один из них не работает.

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

Оба являются критическими проблемами для пользователей. Может кто-нибудь, пожалуйста, помогите мне, это расстраивает.

Спасибо,

Комментарии:

1. Создание элемента visiblity: hidden не мешает ему занимать место в макете.

2. @Pointy Я не понял вашу точку зрения, не могли бы вы подробнее рассказать.

3. Если вы создадите элемент visibility: hidden; , он не будет показан, но (например), если он имеет высоту 500 пикселей <div> , он все равно будет использовать 500 пикселей. Это в основном то же самое, opacity: 0; что и . Возможно, это дает вам две дополнительные страницы в конце ваших распечаток.

4. @Pointy Спасибо за объяснение. Не могли бы вы предложить мне способ избавиться от лишних страниц. Я пробовал display : none; , но он скрывает полный модальный.

Ответ №1:

Наконец, я смог решить «Проблему — 1: поля страницы»,

Я разделил свой CSS-код следующим образом: @media screen{} amp; @media print{}. Я добавил CSS в @media Screen{}, но пропустил в @media print{}, позже, после добавления этого в оба раздела, моя проблема — 1 решена.

 @media screen{  
     @page{
        margin:0;
    }

    #stp-printViewVisitModal .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #stp-printViewVisitModal .modal-content {     
      height: 100%;
      border-radius: 0;
      overflow:auto;
    }   
    #stp-printViewVisitModal *{
        font-size:x-small !important;
    }
}

Я не могу понять, почему IE указал на эту проблему, но не chrome.