gpt4 book ai didi

css - 用于非打印用户代理的分页打印的 HTML 和 CSS

转载 作者:行者123 更新时间:2023-11-28 06:31:33 27 4
gpt4 key购买 nike

CSS 具有专门支持打印的功能,专为用于打印的用户代理而设计,其中最著名的可能是 Prince。唉,浏览器不是这样的用户代理,而且 Prince 很贵(桌面版 500 美元)。

所以我开始研究一个密切相关的问题:是否可以使用浏览器(在我的例子中是 Chrome)的打印功能生成正确分页和格式化的输出,其中用户代理(浏览器)输出到屏幕,而不是打印机,尽管它能够打印浏览器窗口的内容。 (这与打印用户代理不同。)任何尝试过它的人都会发现,Chrome(可能还有其他浏览器)不支持 CSS @page 规则。这意味着没有实用的方法来区分左页和右页,但在我的情况下这并不重要。

我只需要:

  • 分页输出,以及
  • 精确控制打印页面上的位置。

通常,当您打印浏览器页面时,确切的格式并不重要。想想运输标签、登机牌或 session 记录。但是,就我而言,打印页面是关键部分,浏览器呈现只是预览。具体来说,我正在尝试为相册准备一个 PDF,以便上传到 MagCloud,这是一种按需杂志打印服务(由书籍打印公司 Blurb 所有)。

(许多应用程序,如 Lightroom,具有书籍布局功能,但由于与本文无关的原因,我无法使用它们中的任何一个。)

所以我的问题也是我要回答的问题:从浏览器生成精确打印输出的简单方法是什么?

最佳答案

我发现,虽然 Chrome 不支持 @page , 它确实支持 page-break-before风格。因此,要获得分页打印输出,您所要做的就是这样:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
position: relative;
page-break-before: always;
width: 5.5in;
height: 8.5in;
}
.inner {
position: relative;
top: .25in;
left: .25in;
width: 5in;
height: 8in;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class=page>
<div class=inner>
<p>This is page one.
</div>
</div>
<div class=page>
<div class=inner>
<p>This is page two.
</div>
</div>
</body>
</html>

请注意,我使用的是英寸而不是像素,从而巧妙地避免了打印页面以像素为单位的分辨率问题。 (它恰好是 96,但我没有使用这个事实,而且它可能在不同的系统上有所不同。)毫米也可以。

这是它在我的浏览器中的样子:

Two pages in browser

我发现内置的 Windows 10 PDF 打印驱动程序不准确,生成的页面无法反射(reflect)我在 CSS 中设置的尺寸。然而,免费的 CutePDF Writer 已经死了,就像 Mac OS X 一样。

这是 Acrobat Reader 中的 PDF:

enter image description here

如您所见,它非常完美。您所要做的就是在 <div class=inner> 中布置您的内容。你准备好了。如果您想要整页出血,例如书籍封面照片,请将内容直接放在 <div class=page> 中。 .

在我的应用程序中,我从 PHP 程序生成了实际的 HTML,但这个静态 HTML 说明了重要的概念。

关于css - 用于非打印用户代理的分页打印的 HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34934944/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com