打印html页面时的保证金

Question

我正在使用单独的样式表进行打印.是否可以在样式表中设置右边距和左边距,以设置打印边距(即纸张上的边距).

谢谢.

Answer 1

指定打印时,应使用cm或mm作为单位.使用像素将导致浏览器将其转换为类似于屏幕上的内容.使用cm或mm将确保纸张尺​​寸一致.

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

对于字体大小,请使用pt打印介质.

请注意,以css样式设置主体上的边距不会调整打印机驱动程序中定义打印机可打印区域的边距,也不会调整浏览器控制的边距(在某些浏览器的打印预览中可以调整)...只会在可打印区域内的文档上设置边距.

您还应该知道,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;  
} 

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

Answer 2

首先说,我尝试强制所有用户在打印时使用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;
    }
}

特例:长桌

当我需要在几页上打印一张桌子的时候margin:0,这@page会导致出血边缘:

我可以通过以下答案解决这个问题:

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;
}

结果:

我宁愿选择简洁且适用于所有浏览器的解决方案.目前,我希望上面的信息可以帮助一些开发人员遇到类似的问题.

Answer 3

我个人建议使用不同的测量单位px.我不认为像素在印刷方面有很大的相关性; 理想情况下你会使用:

• 点(pt)
• 厘米(cm)

我确定还有其他人,有关print-css的一篇优秀文章可以在这里找到:由Eric Meyer 去打印.

Answer 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>