Печать определенного содержимого div с помощью печати css media type?

у меня есть html, который содержит кадры, как показано ниже

  <frameset rows="60,*" border="0" frameborder="0">
    <frame name="frameA">
    <frameset cols="120,*" >
      <frame name="frameB" frameborder=0 >
      <frame name="frameC">
    </frameset>
  </frameset>

Внутри фрейма C у меня есть div с идентификатором «myDivToPrint». Я хочу, чтобы когда пользователь нажимал на печать в браузере, он просто печатал содержимое div myDivToPrint. Вот мой соответствующий css

CSS

@media print {
    #myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

HTML

 <div  id="myDivToPrint" class="page-container myDivToPrint">
  </div>

Но, похоже, это не оказывает никакого влияния на предварительный просмотр печати / печати (firefox отображает все содержимое кадра, а хром отображает только содержимое верхнего кадра при предварительном просмотре). Любые идеи?

Ссылка на описанный выше подход: сообщение BC по адресу Распечатать содержимое DIV


html css printing media-type
person emilly    schedule 27.11.2013    source источник
comment
Раздел печати будет фиксированным относительно окна просмотра кадра, вам также нужно будет сделать так, чтобы кадры a и c также имели фиксированные стили.   -  person Pete    schedule 27.11.2013
comment
@Пит. Было бы полезно, если бы вы могли уточнить свой комментарий. Я не мог этого понять :(   -  person emilly    schedule 27.11.2013
comment
Вы позиционируете свой div фиксированно - это означает, что он обычно позиционируется в окне просмотра, но поскольку ваш div находится внутри iframe, вы просто покрываете весь iframe. Поскольку ваша печать вызывается из-за пределов iframe, вам нужно убедиться, что она покрывает всю основную область просмотра, поэтому вам нужно добавить следующие стили к кадрам A и Frame c при печати height: 100%; width: 100%; position: fixed;   -  person Pete    schedule 27.11.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны скрыть элементы, которые не хотите печатать. Что-то вроде этого:

@media print {
    #myDivToPrint {
       ...
    }

    #elementYouDontWantToPrintId {
       display:none;
    }

}
person reese    schedule 27.11.2013

arrow_upward
1
arrow_downward

использовать новое окно с javascript легко.

        function printout() {

        var newWindow = window.open();
        newWindow.document.write(document.getElementById("output").innerHTML);
        newWindow.print();
    }
person Peter S McIntyre    schedule 29.07.2014