【问题标题】:Simulate A4 page in HTML [duplicate]在 HTML 中模拟 A4 页面 [重复]
【发布时间】:2014-01-22 12:17:16
【问题描述】:

我需要创建一个 A4 纸张大小的 HTML 页面。

我知道以像素为单位的 A4 纸张大小为:595px x 842px字符串编号 10-11)。但是,当我放置这些尺寸并尝试打印页面时(我打印到 PDF 文件,由于暂时缺少墨水),我的 HTML 并没有完全适合页面:它要小得多。

当我尝试添加一些像素(当然是系数)时,我得到了794px x 1122px字符串编号 12-13)和第二次打印尝试(保存到 PDF 文件)给我的结果是这个变体有点大,然后需要。

那么,解决方案是什么?为什么595px x 842px 与保存为 PDF 的真实 A4 不兼容?

This is the example

附:我在 Ubuntu 13.10 上使用 Chromium,并没有在 Windows 上检查它。

我这样做是为了能够简单地通过 PHP 更改值,然后将 HTML 页面转换为 PDF,例如 described here

【问题讨论】:

  • 分享正确的数字 Elliot?
  • 嗯,我从很多网站上拿了它们,包括StackOverflow
  • @ElliottFrisch,我刚刚在 Adob​​e Illustrator 中查找了 A4 页面的数字,并且 OP 具​​有 A4 页面的正确像素尺寸。如果您有一些信息来支持您的声明,请分享,因为我很想知道为什么这些数字会关闭。我的猜测是您可能正在考虑将印刷中的 DPI 作为一个因素。
  • 假设您想要 HQ PDF,您应该使用 300dpi; A4 纸为 8.27 英寸 x 11.75 英寸。因此,对于打印渲染,您将使用 8.27 * 300 = 2481 11.75 * 300 = 3525 您的数字对于 72 DPI 的屏幕分辨率是正确的。
  • @ArtemUshakov 在您链接到的答案中,他们讨论了以毫米为单位指定尺寸。另外,不要忘记页边距和可打印区域。

标签: html pdf


【解决方案1】:

如果您打算打印这个,请记住您应该以 300dpi 打印,因此 8.5"x11"* 300 = height: 3300px;宽度:2550 像素。

另外,我也会缓冲 0.25" 作为边距,所以在转换为像素之前只需做 8" x 10.5"。

【讨论】:

    【解决方案2】:

    HTML 假定屏幕为 96 DPI,或 1 个像素为 1/96 英寸。

    在非常高分辨率的硬件上,它使用逻辑像素的概念,这是接近1/96英寸的单位,每个单位由多个组成设备像素。这适用于打印机,也适用于手机和其他具有高分辨率屏幕的设备。

    因此,如果您想要一个与 A4(21 × 29.7 厘米)大小相同的矩形,您应该使用 794 × 1122 像素,或者在 CSS 中,width:794px; height:1122px。但如果您不想担心这些逻辑像素,也可以使用物理单位 width:21cm; height:29.7cm

    【讨论】:

    • 可以确认使用 w:794 h:1122 1 作为 chrome 中的缩放因子可以重现 A4 大小的预览。它仍然添加了一个滚动条,但无论如何制作 PDF 变得简单多了。
    猜你喜欢
    • 1970-01-01
    • 2017-10-08
    • 2010-10-11
    • 1970-01-01
    • 2017-01-22
    • 2011-03-21
    • 1970-01-01
    相关资源
    最近更新 更多