打印html页面时的边距
Posted
技术标签:
【中文标题】打印html页面时的边距【英文标题】：Margin while printing html page 【发布时间】：2010-12-05 06:24:00 【问题描述】：我正在使用单独的样式表进行打印。
是否可以在设置打印边距的样式表中设置左右边距？ （即纸上的边距）
【问题讨论】：
【参考方案1】：如果您知道目标纸张尺寸，您可以将您的内容放在具有该特定尺寸的 DIV 中，并为该 DIV 添加边距以模拟打印边距。 不幸的是，除了显示打印对话框之外，我认为您对打印功能没有额外的控制权。
【讨论】：
谢谢。无论纸张大小如何，都不能在左右两侧指定保留 x 像素。问候 我想如果您将父 DIV 的大小设置为 100% 并为其添加 x 像素边距，这可能是可能的。【参考方案2】：我个人建议使用与px 不同的度量单位。我不认为像素在打印方面有很大的相关性。理想情况下你会使用：
我相信还有其他的，一篇关于 print-css 的优秀文章可以在这里找到：Going to Print，Eric Meyer。
【讨论】：
你说得对，px 与打印没有太大关系。但是浏览器会“翻译”像素单位，因此它看起来与它在屏幕上的外观相似。它确实不使用“打印机分辨率点”作为像素（感谢上帝......）。【参考方案3】：
指定打印时应使用cm 或mm 作为单位。使用像素将导致浏览器将其转换为类似于屏幕上的样子。使用cm 或mm 将确保纸张尺寸一致。
body
margin: 25mm 25mm 25mm 25mm;
对于字体大小，请使用pt 作为打印媒体。
请注意，以 css 样式设置 body 上的边距将不会调整定义打印机可打印区域的打印机驱动程序中的边距，或由浏览器控制的边距（可以在在某些浏览器上打印预览）...它只会在可打印区域内的文档上设置边距。
您还应该知道，IE7++ 会自动调整大小以最适合，即使您使用cm 或mm，也会导致一切错误。要覆盖此行为，用户必须选择“打印预览”，然后将打印尺寸设置为100%（默认为Shrink To Fit）。
完全控制打印边距的更好选择是使用@page 指令设置纸张边距，这将影响html body 元素之外的纸张边距，该元素通常由浏览器控制。见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;
相关答案： Disabling browser print options (headers, footers, margins) from page?
【讨论】：
现在可以在 Chrome 18 和 IE9 中使用（未测试早期版本）。仍然无法在 Firefox 12 中工作，但您可以进行服务器端检测并添加一个主体类<body class="firefox">，因此您可以在您的 CSS 中执行 body.firefox margin: 0mm; padding: 0.25in;，这实际上是 0.75 英寸的边距，因为 Firefox 已经添加了 0.5 英寸。只要您需要 >= 0.5 英寸的边距，这应该可以工作。
为@page +1！这正是我需要的，因为我要打印多页。
它现在也适用于 Firefox。由于 Firefox 有很好的自动更新程序，这应该不再是我们需要解决的问题。我在 IE、Opera、Chrome、Firefox 和 Safari 上进行了测试。目前唯一不能使用的浏览器是 Safari（Windows 版本 5.1.7）。我没有在 Mac 上测试过。
这只会在首页添加上边距。在所有页面上设置相同边距的更好解决方案：***.com/questions/37033766/…
请注意，在 Chrome 中需要将 Margins 设置为 Default 才能使 @page 指令生效。【参考方案4】：
更新的简单解决方案
@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>
【讨论】：
这在 Chrome 或 FF 中不适合我。另外，class=Section1 应该是 class="Section1"。
这是一个更简单的解决方案：***.com/questions/37033766/…【参考方案5】：
我还推荐 pt 与 cm 或 mm 相比，因为它更精确。 此外，我无法让@page 在 Chrome 中工作（版本 30.0.1599.69 m）它忽略了我为边距放置的任何内容，无论大小。但是，你可以让它与文档的正文边距一起工作，很奇怪。
【讨论】：
【参考方案6】：首先，我尝试强制我的所有用户在打印时使用 Chrome，因为其他浏览器会创建不同的布局。
this question 的回答建议：
@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;
特殊情况：长表
当我需要在多页上打印表格时，margin:0 和 @page 正在导致流血边缘：
感谢this answer，我可以解决这个问题：
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;
结果：
我更喜欢简洁且适用于所有浏览器的解决方案。目前，我希望以上信息可以帮助一些有类似问题的开发者。
【讨论】：
您的解决方案在使用 ERPNext 打印报告时被证明是无价的。我能够轻松地开发自己的自定义打印格式，这些建议非常有用！以上是关于打印html页面时的边距的主要内容，如果未能解决你的问题，请参考以下文章