【问题标题】:How to set Safari print margins via CSS to print borderless如何通过 CSS 设置 Safari 打印边距以打印无边框
【发布时间】:2012-10-20 16:29: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;
}

【问题讨论】:

  • 您的代码中有一个padding: 5%,是否已经计算在内?
  • 是的,将其设置为 0 没有区别,我将其从问题中删除以使其更清晰。

标签: css printing webkit


【解决方案1】:

有 3 件事需要考虑:

  1. 页面规则的边距,很遗憾

    @page {
    margin: 0cm !important;
    }
    

    对 Safari 6 没有影响,它在 Chrome 23 中的影响。据我所知,只要 Safari 不支持这一点,就没有解决方案(它似乎固定在 10mm 左右)。

  2. here 所示的页面设置,您可能必须在“打印...”菜单面板中定义一个自定义“纸张大小”,没有任何边距(顺便说一句,您已经这样做了)。

    李>
  3. 显然要照顾其他内部内容html,body...没有任何边距。

【讨论】:

  • 谢谢,正是第 1 点让我感到困惑。所以现在我只需要等待 Safari 中的修复,或者改用 Chrome。
  • 截至 2016 年底,我们仍在等待 Safari 遵守 @page 元素。这非常令人沮丧,因为它使得使用 Safari 打印 HTML/CSS 中定义的标签等内容变得非常困难。
  • 我定义了一个没有任何边距的自定义纸张尺寸,但预览显示 safari 仍然明显地将我的 SVG 缩小到相同的边距。 $!@#!@
  • @EFC :) 现在是 2019 年了,但仍然如此,遗憾的是其他浏览器。似乎更重要的是生成越来越臃肿的 Javascript API,从而增加了远程代码漏洞和大量隐私问题的可能性,而不是实现 HTML/CSS 方式以某种合理的方式能够打印出一些东西。 2019,仍然没有印刷。
【解决方案2】:

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

无边界打印和打印机:

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

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

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

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

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

好的……现在你知道了。

继续讨论 CSS 无边框打印的问题:

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

Box 模拟了 CSS 中几乎每个元素的行为。您要打印的页面通常包含在某种标签中,可以是带有 id 的 div 或类似这样的类:

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

我们将讨论黑线,称为 border,它是“margin”和“padding”的两个兄弟。

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

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

“修复”:

Safari 正在做正确的事情。我说过了……这不是错误。

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

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

所以你不能修复它,因为它没有坏掉。 Safari 将 div 的边框及其所有内部元素置于打印机报告的纸张“可打印区域”内。很好!

解决办法:

在您使用命令+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 */
  ...
  }
}

【讨论】:

  • 这完全不正确。通过完全忽略 CSS @page 声明(这与设置的边距无关),Safari 做了正确的事情。它完全忽略了@page。接受的答案中的所有内容都是绝对正确的。当然,在您选择打印机和页面大小之前,您无法知道给定打印机的准确页边距,但这个问题是关于打印到 PDF,不受必须处理纸张并在其上喷墨水的物理限制。 PDF 打印机可以毫无问题地进行无边界打印。
  • @unmircea 你能给我指一个 PDF 打印机吗(也就是说,不是物理打印机,而是一个从某种输入创建 PDF 文件的软件)无法创建没有边框的 PDF 文件?如果有的话,我从来没见过。
  • @JanusBahsJacquet 你是对的,但是必须指出,这些文件不会在所有打印机中“按原样”打印。我通常对 macOS 上的 Preview 感到不安,它总是“适合页面”,这使得比例可疑 103%、106% 或 97.4% 来解释这一点。我经常不得不返回将其更改为 100%,然后检查是否有任何内容超出了可打印区域。
  • 这个答案没有抓住重点。即使在报告边距的打印机上,也有一些用例我真的想强制 Safari 忽略它并打印到我指定的边距,即使这意味着切断输出。我遇到过几次的情况是我编写 CSS 以在标签纸上打印标签。我需要非常精确的控制才能正确执行此操作,Chrome 允许控制而 Safari 会忽略。
  • @unmircea 并且据我所知(通过打印量角器),当 Safari 打印对话框中的比例为 100% 时,它实际上并不是真正的大小——它是它的 100%从不可避免的边距中预先缩小尺寸
猜你喜欢
  • 2012-03-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多