执行 window.print 时的边距和填充问题

Question

我正在尝试使用 Javascript window.print 打印 div 容器内的内容。div 容器由 Angular js 管理。

CSS文件

@media print

{

    body, html, #wrapper {

        width: 100%;

        margin:0px;

        padding:0px;

        border: 1px solid red;

    }

    .no-print, .no-print * {

        display: none !important;

    }

    .col-sm-12 {

        width: 100%;

   }

}

包含 DIV 的 HTML

<div ng-show="views.invoice">

    <div class="row col-sm-12" style="margin:0px; padding:0px; width:100%">

        test

    </div>

    <div class="row no-print">

        <div class="col-12">

            <button class="btn btn-success btn-default" onclick="window.print();"><i class="fa fa-print"></i> {{phrase.Print}}</button>

        </div>

    </div>

</div>

这是它在浏览器中的显示方式

当我进行打印时，它打印为 PDF，如下所示

我看到“测试”文本周围有很大的空白。如何在没有边距或填充的情况下进行打印？

Answer 1

问题这很可能是因为您已将抽屉和导航栏（左侧导航和顶部导航）的可见性设置为隐藏。当某些内容的可见性设置为 时hidden，它仍然在布局中并保留其高度、宽度、边距和填充。这就是为什么您会看到抽屉和导航栏的空间，分别导致左侧和顶部的空间。您可以运行并尝试打印以下屏幕。你会看到我提到的问题（由保留的尺寸[高度、宽度、填充、边距]引起的空间）。@media print {&nbsp; body,&nbsp; html,&nbsp; #wrapper {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; border: 1px solid red;&nbsp; }&nbsp; #drawer {&nbsp; &nbsp; visibility: hidden;&nbsp; }&nbsp; #navbar {&nbsp; &nbsp; visibility: hidden;&nbsp; }&nbsp; .no-print {&nbsp; &nbsp; display: none;&nbsp; }}* {&nbsp; box-sizing: border-box;&nbsp; margin: 0;&nbsp; padding: 0;}html,body {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100%;}#wrapper {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; height: 100%;&nbsp; width: 100%;}#navbar {&nbsp; width: 100%;&nbsp; background: blue;&nbsp; color: white;&nbsp; padding: 20px;}#section--right {&nbsp; flex-grow: 1;}#drawer {&nbsp; height: 100%;&nbsp; width: 100px;&nbsp; background: red;&nbsp; color: white;&nbsp; padding: 20px;}#navbar .text {&nbsp; display: inline-block;&nbsp; height: 50px;&nbsp; background: #121212;}<div id="wrapper">&nbsp; <div id="drawer">Some drawer</div>&nbsp; <div id="section--right">&nbsp; &nbsp; <div id="navbar"><span class="text">Some navbar</span></div>&nbsp; &nbsp; <div id="print__section">&nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; </div>&nbsp; &nbsp; <button id="print__button" class="no-print" onclick="window.print()">Print now</button>&nbsp; </div></div>解决方案我的建议是为可打印区域设置一个特殊的 id 或类。body然后，将内部没有此类特殊 id 或类的所有其他元素的可见性设置为隐藏。此外，由于将可见性设置为隐藏仍然允许元素保留其尺寸，因此也将其尺寸（高度、宽度、边距和填充）设置为 0。请注意，您无法使用display: none，因为您的可打印区域也不会显示。这是一个可以解决您的问题的工作示例。@media print {&nbsp; body,&nbsp; html,&nbsp; #wrapper {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; border: 1px solid red;&nbsp; }&nbsp;&nbsp;&nbsp; /* Makes all divs that are not inside the print region invisible */&nbsp; /* Then, set the size to 0 by setting everything (height, width, margin, and padding) to 0 */&nbsp; body *:not(#print__section) {&nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; height: 0;&nbsp; &nbsp; width: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; }&nbsp;&nbsp;&nbsp; /* Parents' visibility cascade to children's visibility */&nbsp; /* Make the print region visible again to override parent's visibility */&nbsp; #print__section {&nbsp; &nbsp; visibility: visible;&nbsp; }}* {&nbsp; box-sizing: border-box;&nbsp; margin: 0;&nbsp; padding: 0;}html,body {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100%;}#wrapper {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; height: 100%;&nbsp; width: 100%;}#navbar {&nbsp; width: 100%;&nbsp; background: blue;&nbsp; color: white;&nbsp; padding: 20px;}#section--right {&nbsp; flex-grow: 1;}#drawer {&nbsp; height: 100%;&nbsp; width: 100px;&nbsp; background: red;&nbsp; color: white;&nbsp; padding: 20px;}#navbar .text {&nbsp; display: inline-block;&nbsp; height: 50px;&nbsp; background: #121212;}<div id="wrapper">&nbsp; <div id="drawer">Some drawer</div>&nbsp; <div id="section--right">&nbsp; &nbsp; <div id="navbar"><span class="text">Some navbar</span></div>&nbsp; &nbsp; <div id="print__section">&nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; </div>&nbsp; &nbsp; <button id="print__button" class="no-print" onclick="window.print()">Print now</button>&nbsp; </div></div>