javascript - 如何使用 CSS 和 javascript 使 HTML 在打印 View 上完美呈现？

Question

浏览器上的打印 View 有一些问题。虽然在 Web 浏览器 View 中看起来很完美，但在打印 View 中却不一样。例如，在打印 View 上设置边距或填充对我不起作用。此外，在打印 View (垂直对齐)上旋转表格对我来说很陌生。我如何处理使用 HTML、CSS 和 javascript 的问题？

Answer 1

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>        body {
            margin: 0;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .page {
            width: 21cm;
            min-height: 29.7cm;
            padding: 2cm;
            margin: 1cm 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 red solid;
            height: 256mm;
            outline: 2cm #FFEAEA solid;
        }
        
        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div class="book">
        <div class="page">
            <div class="subpage">Page 1/2</div>    
        </div>
        <div class="page">
            <div class="subpage">Page 2/2</div>    
        </div>
    </div></code></pre>
</div>
</div>