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

我想在Safari中将网页打印成PDF格式，不留任何空白。页面大小在打印对话框中设置为“A4无边框”

无论我做什么，OSX上的Safari都在我的HTML周围添加了额外的空白。检查“打印背景”以了解我的意思

显然@page规则对Safari没有影响，但是还有其他方法吗

---

​

有三件事需要考虑：

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

@page {
margin: 0cm !important;
}

对Safari 6没有影响，在Chrome 23中没有。正如我所知，只要Safari不支持这个，就没有解决方案（它似乎被固定在10毫米左右）

如图所示，页面设置可能需要在“打印…”菜单面板中定义一个自定义的“纸张大小”，无任何边距（顺便说一句，您已经这样做了）

显然要照顾其他内部内容的html，正文…没有任何空白

---

选定的答案不太正确。要正确回答问题，你首先需要理解问题

无边框打印和打印机：

很少有打印机可以“实际”打印无边框打印，即使他们说可以。大多数情况下，只需将打印放大一点，使其延伸到实际页面之外，通常会给您一个滑块来调整该数量。原因是大多数打印机没有传感器来确定纸张的实际位置，它假定纸张在那里，而对于大多数打印来说，纸张的偏移量是0,5毫米，甚至是1毫米都无关紧要

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

由于这个原因，95%的打印机模拟这种“无边界”打印方式，实际上是在稀薄的空气中运行一点墨水，这样纸张就可以一直覆盖到边缘。在空气稀薄的情况下印刷是不好的，可能会造成长期污迹，应避免，因此必须将边缘上的印刷量调整到最小

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

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

好的。。。现在你知道了

关于CSS无边框打印的问题：

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

这个框模拟了CSS中几乎每个元素的行为。要打印的页面通常包装在某种类型的标记中，可以是带有and id的div，也可以是这样的类：

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

如果你不能将页面包装到另一个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 */
  ...
  }
}

---

你有一个

填充：5%

在你的代码下面，这已经在中计算了吗？是的，将它设置为0没有什么区别，我从问题中删除了它以使它更清楚。谢谢，这正是让我困惑的第1点。所以现在我只能等待Safari的修复，或者改用Chrome。截至2016年底，我们仍在等待Safari遵守@page元素。这非常令人沮丧，因为使用Safari打印HTML/CSS中定义的标签等内容非常困难。我定义了一个没有任何边距的自定义纸张大小，但预览显示Safari仍然明显地将我的SVG缩小到相同的边距。$！@#@@EFC:）现在已经是2019年了，现在仍然是这样，对于其他浏览器来说，这是很不幸的。生成越来越臃肿的Javascript API，从而增加远程代码攻击和大量隐私问题的可能性，这似乎比实现HTML/CSS方式（某种合理的打印方式）更重要。2019年，仍然没有印刷。这完全是错误的。Safari完全忽略CSS

@page

声明（这与边距设置无关），这样做是不对的。它只是完全忽略了

@page

。所有被接受的答案都是绝对正确的。当然，在选择打印机和页面大小之前，您无法知道给定打印机上的准确页边距，但这个问题是关于打印到PDF的，不受必须处理纸张和在其上喷洒墨水的物理限制的影响。PDF打印机可以无边框打印。@unmarcea你能给我指一台PDF打印机（不是物理打印机，而是一种通过某种输入创建PDF文件的软件），它不能创建无边框的PDF文件吗？如果有，我从来没有见过。@JanusBahsJacquet你是对的，但是必须指出，这些文件在所有打印机中都不能“按原样”打印。我通常在macOS上预览时会感到不安，它总是“适合页面”，这使得这个比例不确定是103%、106%还是97.4%。我经常要回去把它改成100%，然后检查是否有内容超出了可打印区域。这个答案没有抓住要点。即使在报告其页边距的打印机上，也有一些使用案例，我真的希望强制Safari忽略这些，并按我指定的页边距打印，即使这意味着要切断输出。我遇到过几次这样的情况，当我写CSS在标签纸上打印标签时。我需要非常精确的控制来正确地执行此操作，控制Chrome允许和Safari忽略。@Unmercea并且据我所知（从打印出量角器），当Safari打印对话框中的比例为100%时，它实际上不是真实的大小——它是从不可避免的边距中预缩放的大小的100%。

/* @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 */
  ...
  }
}

/* @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 */
  ...
  }
}