打印 html 页面时保留页边距

我使用一个单独的样式表打印。

是否可以在设置打印边距的样式表中设置右边距和左边距？(即票面保证金)

354327 次浏览
小开

如果您知道目标纸张大小，您可以将内容放置在具有特定大小的 DIV 中，并向该 DIV 添加一个边距以模拟打印边距。 不幸的是，除了显示打印对话框之外，我认为您对打印功能没有额外的控制。

小开

我个人建议使用与 px不同的度量单位。我不认为像素与印刷品有多大关系; 理想情况下，你会使用:

  • 点(pt)
  • 厘米(厘米)

我肯定还有其他的，这里有一篇关于 print-css 的优秀文章: 打印，by Eric Meyer。

小开
最佳答案

指定打印时，应使用 cm或 mm作为单位。使用像素将使浏览器将其转换为类似于屏幕上的样子。使用 cm或 mm将确保纸张的尺寸一致。

body
{
margin: 25mm 25mm 25mm 25mm;
}

对于字体大小，请对打印媒体使用 pt。

请注意，在 CSS 样式下设置主体上的边距将 没有调整打印机驱动程序中定义打印机可打印区域的边距，或者由浏览器控制的边距(可能在某些浏览器的打印预览中可以调整) ... 它只是在可打印区域内设置文档的边距。

您还应该注意，IE7 + + 会自动调整大小以使其最适合，并且即使使用 cm或 mm，也会导致一切错误。要覆盖此行为，用户必须选择“打印预览”，然后将打印大小设置为 100%(默认为 Shrink To Fit)。

完全控制打印页边距的一个更好的选择是使用 @page指令来设置页边距，这将影响 html 正文元素之外的页边距，该元素通常由浏览器控制。见 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html。
目前除了 Safari，所有主流浏览器都可以使用。
在 Internet Explorer 中，边距实际上是在打印设置中设置为这个值的，如果你预览，你会得到这个默认值，但是用户可以在预览中更改它。

@page
{
size: auto;   /* auto is the initial value */


/* this affects the margin in the printer settings */
margin: 25mm 25mm 25mm 25mm;
}


body
{
/* this affects the margin on the content before sending to printer */
margin: 0px;
}

相关回答: 从页面禁用浏览器打印选项(页眉、页脚、页边距) ？

小开

更新，简单解决方案

@media print {
body {
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
}
}

老办法

创建每个页面的部分，并使用下面的代码来调整页边距、高度和宽度。

如果您打印的是 A4尺寸。

然后用户

尺寸: 8.27英寸和11.69英寸

@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}






div.Section1 {
page: Section1;
}

然后创建一个包含所有内容的 div。

<div class="Section1">
type your content here...
</div>
小开

我也推荐 pt 和 cm 或 mm，因为它们更精确。 此外，我无法让@page 在 Chrome (30.0.1599.69 m 版本)中工作，它会忽略我放在页边空白处的任何内容，不管是大页还是小页。但是，你可以让它与文档的正文边距一起工作，真奇怪。

小开

首先，我试图强迫我的所有用户在打印时使用 Chrome，因为其他浏览器创建不同的布局。

这个问题的回答建议:

@page {
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
}

然而，我最终使用这个 CSS 来打印我所有的页面:

@media print
{
@page {
size: A4; /* DIN A4 standard, Europe */
margin:0;
}
html, body {
width: 210mm;
/* height: 297mm; */
height: 282mm;
font-size: 11px;
background: #FFF;
overflow:visible;
}
body {
padding-top:15mm;
}
}


特殊情况: 长桌

当我需要打印几页的表格时，带有 @page的 margin:0会导致边缘出血:

bleeding edges

我可以解决这个问题，感谢 这个答案:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

另外，为 @page设置自上而下的利润率:

@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}

结果:

solved bleeding edges

我宁愿选择一个简洁并且适用于所有浏览器的解决方案。现在，我希望上面的信息可以帮助一些有类似问题的开发人员。

小开

您也可以尝试这一个，使用顶部负边距

@media print {
@page {
/* size: 210mm 297mm;  */
margin: -110mm 16mm 27mm 16mm;
}

}


提交答案