css 打印html页面时的边距

ttvkxqim  于 2023-03-20  发布在  其他
关注(0)|答案(7)|浏览(445)

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

t5zmwmid

t5zmwmid1#

指定打印时,应使用cmmm作为单位。使用像素将导致浏览器将其转换为与屏幕上类似的内容。使用cmmm将确保纸张上的大小一致。

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

对于字体大小,打印介质使用pt
请注意,在css样式中设置正文的边距不会调整定义打印机可打印区域的打印机驱动程序中的边距,或由浏览器控制的边距(在某些浏览器上,在打印预览中可能可以调整)......它只会在可打印区域内的文档上设置边距。
您还应该注意到IE7++会自动调整大小以达到最佳匹配,即使您使用cmmm,也会导致所有内容都错误。要覆盖此行为,用户必须选择“打印预览”,然后将打印大小设置为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?

x6h2sr28

x6h2sr282#

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

结果:

我宁愿选择一个简洁的解决方案,并与所有浏览器。目前,我希望上面的信息可以帮助一些开发人员与类似的问题。

njthzxwz

njthzxwz3#

更新、简单的解决方案

@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>
ljo96ir5

ljo96ir54#

我个人建议使用不同于px的度量单位,我不认为像素与印刷品有太大关系;理想情况下,您应该用途:

  • 点(pt)
  • 厘米(cm)

我相信还有其他的例子,这里有一篇关于print-css的优秀文章:Going to Print,通过Eric Meyer

lqfhib0f

lqfhib0f5#

我也推荐使用pt而不是cm或mm,因为它更精确。另外,我无法让@page在Chrome(版本30.0.1599.69 m)中工作,它会忽略我为边距设置的任何内容,无论大小。但是,你可以让它在文档的正文边距中工作,这很奇怪。

fnatzsnv

fnatzsnv6#

你也可以试试这个,使用顶部负边距

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

}

sqxo8psd

sqxo8psd7#

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

相关问题