Печать модального содержания в виде полной страницы формата А4

Я пробую две вещи:

Показывать контент в модальном виде, как он появится на странице формата A4
windows.print() модальный на странице A4 через основные браузеры

Ниже приведен мой CSS:

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

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

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }

    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

Вот как выглядит модальное:

Но так выглядит при вызове window.print() при нажатии кнопки:

Что я здесь делаю неправильно? Относительный новичок CSS, посмотрел на кучу вопросов SO и других ресурсов, но, похоже, не может понять этого.

UPDATE: я использовал z-index: 9999 и ширину: 140% для получения модального контента (например, class= "page" ), чтобы покрыть ширину страницы A4. Не думайте, что это лучшее решение, также не может получить высоту, чтобы растянуть весь 297 мм; высота по-прежнему такая же, как показано на втором изображении. 140% отлично смотрится на pdf, сохраненном через Chrome, обрезается (понятно) в firefox и отображается как пустой pdf в IE. Обновлен CSS: @media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

Ответы

Ответ 1

Я бы написал комментарий, но не могу, так что ответьте на вопрос. tl; dr, вам нужно предоставить больше кода или воспроизвести эту проблему в том месте, где мы можем ее увидеть.

Я помещаю ваш код в обычную страницу только с div с классом page и вложил div с классом subpage, и есть некоторые проблемы с заполнением, и вид печати не похож на веб-представление.

Ваш min-height: 297mm; не был необходим и добавлял дополнительное пространство, поскольку оно не выравнивается с настройкой высоты для .subpage.

Ваш position:absolute; сжал ваш .subpage в режиме печати.

Но с этими двумя настройками ваш css с просто простыми div в html работает отлично. Я подозреваю, что что-то еще на вашей странице имеет противоречивые измерения, но опять же, без воспроизведения на скрипке или что-то еще, мы не можем ее увидеть.

PS: Я видел этот пост еще некоторое время назад, и там есть ДЕМО. Выглядит многообещающе: CSS для установки формата бумаги A4

Ответ 2

Пожалуйста, попробуйте

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}

Ответ 3

Я обновил пример jsfiddle, чтобы он соответствовал вашим потребностям

Вот код css

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

Вот html:

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>

и код javascript для вызова print:

document.getElementById("btnPrint").onclick = function() {
  window.print();
}

http://jsfiddle.net/95ezN/1459/