Я создал что-то похожее на шаблон с веб-сайта и с радостью начал его использовать. Когда я печатал информацию, мой принтер был изначально настроен на альбомную ориентацию, поэтому все выглядело хорошо, и я получил красивый отчет, аккуратно центрированный на странице. Ниже приведен файл, который я сгенерировал (я использую шаблонизатор jinja2, но если я знаю, что не так с HTML / CSS, я могу исправить шаблоны).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4, from LayoutIt! -->
<title>SPoE Testing</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="page-header">
<h1>
Integrated Next-Generation Test System
</h1>
<hr>
</div>
</div>
<div class="col-md-3">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="page-header">
<h2>
Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
</h2>
<hr>
</div>
<div class="row">
<div class="col-md-4">
<h3>#0000000</h3>
</div>
<div class="col-md-8">
<h3>pass</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h5>Step 1</h5>
</div>
<div class="col-md-8">
<h5>pass</h5>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
power
</div>
<div class="col-md-8">
28.1
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
current
</div>
<div class="col-md-8">
525
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
voltage
</div>
<div class="col-md-8">
53.7
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<style type="text/css"> @page { size: auto } </style>
</body>
</html>
Как вы можете видеть, это хорошо печатает в альбомной ориентации:
К сожалению, когда я пытаюсь печатать в портретном режиме, результат получается менее убедительным:
Встроенный @page { size: auto } - это то, что я добавил в результате своих исследований - это было рекомендовано в этом вопросе , но, увы, это, похоже, не имеет значения. Интересно, что, хотя я обнаружил несколько вопросов, касающихся невозможности печати в альбомной ориентации, никто другой, по-видимому, не нашел портретную раскладку проблемой.
Как дизайнер, я довольно хороший каменщик, поэтому, хотя софт для меня не проблема, я иногда нахожу эти проблемы с дизайном довольно сложными. Что здесь происходит, и как мне это исправить?