18

我想在 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;
}

​</p>

4

2 回答 2

10

有 3 件事需要考虑：

  1. 页面规则的边距，不幸的是

    @page {
margin: 0cm !important;
}

    对 Safari 6 没有影响，它在 Chrome 23 中起作用。据我所知，只要 Safari 不支持这一点，就没有解决方案（它似乎固定在 10 毫米左右）。

  2. 在这里看到的页面设置，您可能必须在“打印...”菜单面板中定义自定义“纸张尺寸”，没有任何边距（顺便说一句，您已经这样做了）。

  3. 显然是要照顾其他的内部内容html，body...没有任何余量。

于 2012-12-20T16:29:09.250 回答
4

选择的答案不太正确。要正确回答问题，您需要先了解问题。

无边距打印和打印机：

很少有打印机可以“实际上”打印无边界打印件，即使他们说可以打印。大多数只是将打印放大一点，使其超出实际页面，并且通常会给您一个滑块来调整该数量。原因是大多数打印机没有传感器来确定纸张的实际位置，它假定纸张在那里，对于大多数打印来说，它是否偏离 0.5 毫米甚至 1 毫米都没有关系。

对于无边框来说，这很重要，因为打印出来的时候周围有一个白色（纸）边框。

出于这个原因，95% 的打印机模仿这种“无边界”打印，实际上是让墨水在稀薄的空气中运行一点点，这样纸张就一直被覆盖到边缘。在稀薄的空气中打印是不好的，长期会造成污迹，应该避免，因此必须将边缘打印量调整到最低限度。

好的大幅面打印机有一个传感器来检测纸张宽度，但它用于稍微调整纸张，因为每卷 50 到 150 米的长度甚至会导致 0.1 毫米的错位成为问题并导致卡纸。

为了完全解决这个问题，使用了“出血”，您实际上将所有内容设计为稍大的纸张，然后将其切割成一定尺寸。

好的……现在你知道了。

继续 CSS 无边框打印的问题：

要完全理解这个问题，必须熟悉“盒子”。

盒子模型

Box 对 CSS 中几乎每个元素的行为进行建模。您要打印的页面通常包含在某种标签中，可以是带有和 id 的 div 或像这样的类：

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

我们将讨论黑线，称为边框，它是“margin”和“padding”的两个兄弟姐妹。

大多数人不知道的是，那里的每台打印机实际上都报告了它所支持的每种纸张尺寸的页边距。

这是一个这样做的 HP 2800dtn（只需将鼠标悬停在纸张尺寸上一段时间，它就会出现）。

惠普 2800dtn

“修复”：

Safari 正在做正确的事情。我在那里说过...这不是错误。

它显然拒绝生产无边界打印的原因是它实际上是不可能的（在现实世界中）。你可以做到，但是以 100% 缩放打印它的人会被打印机修剪掉内容，正如我所描述的，它不能打印到边缘。

所以大多数人必须“适应纸张”边距（默认的 OS X 行为，缩小到大约 98% 缩放）然后在打印机上启用无边框模式，这反过来又将缩小的 98% 缩放版本放大到 103%。如果你做数学，你会得到一个奇怪的数字，可能是原始版本的 101.5%（我不能肯定地说，如果它不被二除，我就不太擅长数学 :) 这不完全是字体和矢量图形的问题，但它在像素世界中造成严重破坏。像素世界喜欢，就像我一样，默认数字 2，其余的只是“平滑”它。

所以你无法修复它，因为它没有损坏。Safari 将 div 的边框及其所有内部元素置于打印机报告的纸张“可打印区域”内。好的！

解决方案：

在您使用 command+p并选择纸张尺寸之前，您无法知道打印机边距。

但是你可以在 CSS 中做些什么来获得每个人都喜欢的“所见即所得”的感觉呢？

  1. 使用您定义的 div.page 上的边距。请注意，边距是根据包含该 div 的元素计算的。所以你需要page把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 */
  ...
  }
}

如果您不能将页面包装到另一个 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 */
  ...
  }
}
于 2015-12-01T11:03:51.563 回答