如何通过CSS设置Safari打印边距以无边框打印

aurhwmvo  于 2023-02-20  发布在  其他
关注(0)|答案(3)|浏览(452)

我想在Safari中将网页打印为没有任何边距的PDF。页面大小在打印对话框中设置为“A4无边框”。
不管我做了什么,OSX上的Safari在HTML周围增加了额外的边距。检查“打印背景”看看我的意思。
显然,@page-rule对Safari没有影响,但还有其他方法吗?
http://jsfiddle.net/willemvb/psFHC/

@page {
  size: 21cm 29.7cm;   /*A4*/
  margin: 0; /*webkit says no*/
}

html{
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%; 
    background: #eee;
}
ioekq8ef

ioekq8ef1#

有3件事要考虑:
1.不幸的是,页面的边缘

@page {
margin: 0cm !important;
}

对Safari 6没有影响,在Chrome 23中有影响。据我所知,只要Safari不支持这一点,就没有解决方案(似乎固定在10mm左右)。
1.页面设置如here所示,您可能必须在“打印...”菜单面板中定义一个自定义的“纸张大小”,没有任何边距(您已经这样做了btw)。
1.显然要照顾到其他内部内容html,身体...没有任何保证金。

lqfhib0f

lqfhib0f2#

所选答案不完全正确。要正确回答问题,您需要先了解问题。

无边框打印和打印机:

很少有打印机可以“实际”打印无边框打印,即使他们说他们这样做。大多数只是放大打印一点,使其延伸超出实际页面,通常,给予你一个滑块来调整该数额。原因是,大多数打印机没有一个传感器来确定纸张实际上是在那里,它假设纸张在那里,对于大多数打印没有关系,如果它是0,5毫米,甚至1毫米。
对于无边框,这很重要,因为打印出来的周围有一个白色(纸)边框。
出于这个原因,95%的打印机模仿这种“无边框”打印,实际上运行墨水到稀薄的空气一点点,只是为了使纸张被覆盖所有的方式到边缘。打印到稀薄的空气是不好的,可以导致污迹在长期和应该避免,所以打印量超过边缘必须调整到最低限度。
好的大幅面打印机有一个传感器来检测纸张宽度,但它是用来稍微调整纸张,因为长度,50至150米每卷,可以导致甚至0.1毫米错位成为一个问题,并导致卡纸。
为了完全解决这个问题,使用了“出血”,即您实际上将所有内容设计到稍大的纸张上,然后再将其剪切到适当的大小。

  • 现在你知道了 *
    关于CSS无边框打印的问题:

要充分理解这个问题,必须熟悉“盒子”。

Box几乎模拟了CSS中每个元素的行为,你要打印的页面通常被某种标签 Package ,或者是一个带有id的div,或者是一个类,如下所示:

<div class="page">lots of content</div>

我们将讨论黑线,称为 border,它是两个兄弟的“margin”和“padding”。
大多数人不知道的是,每台打印机实际上都报告了它所支持的每种纸张大小的页边距。
这里是一个惠普2800 dtn这样做(只需悬停在纸张大小一段时间,它就会出现)。

“修复”:

Safari正在做正确的事情。我说了...这不是一个错误。
它拒绝无边框打印的原因是它实际上是不可能的(在真实的世界中)。你可以做到这一点,但人们以100%的缩放比例打印它会让打印机修剪掉内容,正如我所描述的,打印机不能打印到边缘。
因此,大多数公司将不得不“适应纸面”利润(默认的OS X行为,缩小到大约98%的缩放),然后在打印机上启用无边框模式,这反过来又会将缩小后的98%缩放版本放大到103%。如果你算一算,你会得到一个奇怪的数字,可能是原始版本的101. 5%(我不敢肯定,如果不除以2,我就不太擅长数学:)这对字体和矢量图形来说并不是一个问题,但它对像素世界造成了严重破坏。像素世界和我一样,默认情况下喜欢数字2,其余的只是“平滑”它。

  • 所以你无法修复它,因为它没有坏。Safari将div的边框及其所有内部元素放置在打印机报告的纸张“可打印区域”内。很好!*
    解决方案:

只有使用命令+p * 和 * 选择纸张大小,才能知道打印机边距。
但是,在CSS中您可以做些什么来获得每个人都喜欢的“所见即所得”的感觉呢?
1.使用您定义的www.example.com上的margindiv.page。注意margin是从包含该div的元素计算的。因此您需要将page Package 在actualpage
为每种媒体类型定义CSS,以便屏幕显示想象中的打印边距(接近真实的的东西),而打印得到的是没有边距的版本。

/* @media all { */ /* I like using these */
  div.actualpage {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   ...
  }
  div.page {
   ...
   /* margin: 0;  you don't really have to explicitly set it to 0 unless it's already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  margin: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  margin: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}

如果你不能把页面 Package 成另一个div,你可以破解它(即:不太优雅的解决方案)。

/* @media all { */ /* I like using these */
  div.page {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   /* padding: 0;  you don't really have to explicitly set it to 0 unless it's already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  padding: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  padding: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}
xv8emn3q

xv8emn3q3#

热敏标签打印机可以打印没有页边距。这只是一个用例。我相信还有更多。我刚刚补充了

@page {margin:0 !important}

到我的样式表,Safari拿走了它。所以,它必须被修复。

相关问题