Это очень сложный сценарий. Мой ответ не является решением.
В отношении моего кода ниже, проблема с масштабированием. Если бы мой .page div был импортирован в <iframe>, а затем масштабирован с использованием css transform, это бы выглядело как одностраничный документ формата А4 (например, PDF). Таким образом, если вы уменьшите масштаб до уровня мобильного устройства, .page будет уменьшаться, как предварительно просмотренный документ формата А4.
Но тогда вам нужно учитывать и другие вещи: переполнение нескольких страниц, поля печати, отзывчивость в Интернете ... это техническая задача.
Самая безопасная ставка - просто используйте стандартный класс начальной загрузки .container для div и создавайте содержимое своей страницы внутри него. Таким образом, вы можете переполниться на две страницы. Просто используйте начальные классы basi c css для текста, таблиц и т. Д. c, и вы должны быть золотыми.
Bootstrap на своих собственных ручках. Вы можете добавить дополнительный стиль @media print для удаления отступов на .container. поэтому ваш контент заполняет страницу.
Вот мой экспериментальный код ниже, но это не хорошее решение, оно зависит от того, чего именно вы пытаетесь достичь.
Практичность - это то, куда я бы направил в сторону.
BODY {
background: darkgray;
min-height: 100%;
padding: 30px;
}
.page {
height: 0;
padding-top: calc(100% / 8.27 * 11.65);
overflow: hidden;
background: #fff;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
position: relative;
}
.page-inner {
position: absolute;
top: calc(100% / 11.65);
right: calc(100% / 8.27);
bottom: calc(100% / 11.65);
left: calc(100% / 8.27);
}
@media print {
BODY {
background: none;
padding: 0;
}
.container {
width: 100%;
padding: 0;
}
.page {
background: none;
box-shadow: none;
}
.page-inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="container">
<div class="page">
<div class="page-inner">
<h1 class="display-4">Display test title for print</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus aliquet turpis, vel luctus sapien ullamcorper sed. Donec sit amet arcu ut urna tempus consectetur cursus porttitor justo. Vivamus vitae mollis nunc. Donec blandit euismod tristique.
Nam at sem non urna vehicula hendrerit non ac dui. Sed imperdiet lorem at nisi lacinia, in vehicula eros feugiat. Nulla vitae vulputate mauris, malesuada vulputate erat. Donec eleifend augue eros, at scelerisque ex suscipit in.</p>
<p>Donec bibendum purus nec fringilla hendrerit. Etiam commodo viverra lorem a hendrerit. Etiam venenatis ultrices ante venenatis facilisis. Nunc purus massa, tincidunt a sollicitudin quis, euismod nec ligula. Donec feugiat enim ac sapien sodales,
id vehicula diam pharetra. Fusce auctor quis risus pellentesque sagittis. Sed fermentum orci odio, et consectetur velit maximus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus congue
ac erat eu vestibulum.</p>
<hr/>
<h2>Sub test title for print</h2>
<p>Mauris id turpis a nisi tempus ullamcorper. Mauris id pharetra ante, id consectetur erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam leo, facilisis tempus mauris nec, porttitor ultrices leo. Vestibulum vehicula ullamcorper
consequat. Maecenas viverra sollicitudin libero, ut faucibus metus tristique sed. Etiam purus magna, luctus non iaculis luctus, molestie nec justo. In molestie, lectus eget feugiat vehicula, nisi libero pulvinar justo, vitae hendrerit mi odio
a erat. In malesuada eros eu libero varius, sed convallis turpis rutrum. In eu tortor sed elit bibendum volutpat blandit eget ipsum. In varius ex fermentum nisi mattis, id vehicula purus efficitur.</p>
</div>
</div>
</div>