我运行了Angular 12应用程序，并且集成了打印功能。我不想在打印页面中显示页眉和页脚，所以我添加了边距：0；我在主体中添加了边距，但不知何故，只有边距顶部被应用，而不是边距底部。
有没有办法为每一页添加边距-底部。
Stackblitz代码：https://stackblitz.com/edit/angular-ivy-oufgr5?file=src/app/app.component.html
样式. scss
@media print {
@page {
margin: 0;
}
body {
padding-top: 1in !important;
padding-bottom: 1in !important;
padding-left: 0.3in !important;
padding-right: 0.3in !important;
}
}
您可以尝试这只是乱搞的值以获得所需的结果
@page {
margin-bottom: 1cm;
margin-top: 1cm;
}
/*You can add this as an extra for compatibility*/
@media print {
body {
margin-top: 1cm !important;
margin-bottom: 1cm !important;
margin-left: 0.3cm !important;
margin-right: 0.3cm !important;
}
}
您遇到的问题是只有一个长主体分布在多个页面上，因此边距仅适用于第一页。
再次阅读您的描述后，我似乎明白您想在不实际添加边距的情况下添加一些边距。您可以通过在表格页眉和页脚中添加虚拟的、占用空间的内容来作弊。我相应地更新了示例。
这是一个具有自生成表的示例虚拟页面。如果您将其保存在html文件中并在浏览器中打开，当您打印它时，您可以看到浏览器“避免”“tr”中的分页符并相应地拆分表，即使边距设置为0。您还可以在每页的开头和结尾看到虚拟边距。
<head>
<style>
@page {
margin: 0;
}
table {
page-break-inside: auto;
width: 100%;
}
.fake-margin {
height: 100px;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
td {
border: 1px solid gray;
}
</style>
</head>
<body>
<table id="example"></table>
</body>
<script>
let a = new Array(1200).fill('<tr><td>Example 1</td><td>Example 2</td><td>Example 3</td><td>Example 4</td></tr>')
let t = document.getElementById('example').innerHTML = '<thead><tr><th class="fake-margin" /></tr><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr></thead><tbody>' + a.join('') + '</tbody><tfoot><th class="fake-margin" /></tfoot>';
</script>
你可以试试这个：
@media print {
@page {
size: auto; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 10mm;
}
body {
/* this affects the margin on the content before sending to printer */
margin: 0px;
}
}
这是更新的项目：https://stackblitz.com/edit/angular-ivy-yfi7us?file=src/styles.css
