按比例缩放 HTML 以完全适合 PDF A4 大小

Posted

技术标签:

【中文标题】按比例缩放 HTML 以完全适合 PDF A4 大小【英文标题】:Scale HTML proportionally to fit exactly to PDF A4 size 【发布时间】:2012-10-03 03:21:36 【问题描述】:

我正在使用 phpmysql、jQuery。我有一个要转换成高分辨率 A4 尺寸 PDF 的网页:http://optisolbusiness.com/funeral_site/sample/index/id/255。

我已使用wkhtmltopdf 将 HTML 转换为 PDF,效果很好。

这是生成的 PDF http://optisolbusiness.com/Guru/Gurupdf/optisol.pdf。但是 HTML 并不完全适合 PDF 大小; PDF 中的 HTML 周围有空格。如何缩放 HTML 以适应 A4 PDF 大小 100%?重要的是 html 中的内容(即)文本大小、图像宽度和高度、背景图像也要按比例缩放。

【问题讨论】:

这个问题应该说明它是我要求的this question 的后续问题。这将为受访者提供有用的背景信息。 页面未找到 :( 【参考方案1】:

您的背景图片不是完全高分辨率,这在打印时看起来不太好。

我不知道 wkhtmltopdf 本身,但是您的身体已经设置了绝对尺寸(以英寸为单位)。这大概就是问题所在。你的身体有一个最大尺寸,内容也有一个绝对尺寸(由于背景图像像素尺寸)。

这不是 html 到打印转换的好起点,PDF 本质上是打印。

做什么(中级)

从正文中删除任何大小限制 wkhtml... 有一个名为zoom 的开关,1.5 应该是填充页面的合适值 使用页面大小 a4

做什么(“正确”的方式)

从正文中删除大小限制 使用 html 元素和 css 样式构建背景边框(黑色边框) 不要为这些定义“宽度”规则。您只需定义一次“宽度”,所有其他宽度都应设置为“自动”。 高度会很麻烦,因为 div 只能达到其内容所需的高度。但设置 height: 100% 不考虑边框和边距大小。 黄色十字也可以用 css 设计,或者分辨率更高的 png/jpeg 仅使用“真实”尺寸。这意味着使用像素,使用点、英寸或毫米。您可以使用 % 值,但请确保这些值是实际尺寸的 % 值(这意味着在某些时候父元素具有实际尺寸)

【讨论】:

我没有看到连接,你能详细说明一下吗? 非常感谢 wkhtmltopdf 缩放选项效果很好。你节省了我很多时间。效果很棒,很棒,完美,双重你很棒。非常感谢 @Guru:如果它最终会变得自动化和永久化,那么您真的应该遵循我的第二部分。稍加注意就不会很难实现,并且输出质量会更高。请记住,像素尺寸受 DPI 缩放的影响,因此您的输出可能会随着时间、平台和程序而变化。此外,缩放参数所需的值取决于内容的大小,这不利于可维护性。此外,HTML 视图将更类似于 PDF 输出。 我正在使用 Wkhtmltopdf、windows OS、Xampp 从 windows 命令将 html 转换为 A4 PDF 文档。它工作正常。但是我如何通过 PHP 实现这一点。我使用的 Windows 命令是 D:\Program Files\wkhtmltopdf>wkhtmltopdf.exe google.com E:/mypdfs/d.pdf 从命令行可以正常工作。我如何用 PHP 做到这一点任何人都可以帮助我。任何建议 在查看 wkhtmltopdf 站点时,我发现了一个指向 this project implementing PHP bindings 的链接,可能想查看它。否则,PHP 中有一个名为exec 的函数可以让您运行任何命令。无论哪种方式,您都必须在 XAMPP 服务器上安装 wkhtmltopdf;如果是 linux,应该有一个包可用于您的发行版。【参考方案2】:

我想说的是,你总是会努力让它变得完美。在我看来,您最好直接编写 PDF,而不是依赖第三方工具。

考虑研究FPDF,一个开源的 PHP PDF 编写库。请注意,该网站看起来已经过时,但功能非常好。

【讨论】:

任何你要求“准确”并生成 PDF 的东西,你绝对应该看看像 FPDF 这样的库。我过去用过它。这需要一点时间来适应,生成的代码非常丑陋,但你基本上可以生成任何你想要的东西,一个像素一个像素。【参考方案3】:

您可以将正文的大小设置为页面的大小。如果 A4 为 210x297mm。

顺便说一句:你应该只使用百分比宽度,否则 wkhtmltopdf 将不得不尝试转换它。

因此,如果您希望它填满整个房间,请确保使用 width: 100%;。 ;)

顺便说一句:如果您想要真正的高质量 PDF,您需要创建至少符合 PDF/X-3 standard 的 PDF。我不认为wkhtmltopdf 会这样做。

【讨论】:

在哪里设置宽度100%?? 为每个需要全宽的标签设置它,因为这就是你所说的问题 如果我为每个标签左侧设置,顶部,宽度和高度应缩放为 100% 宽度 html 背景图片不会缩放到容器大小。不管你定义什么宽度。

以上是关于按比例缩放 HTML 以完全适合 PDF A4 大小的主要内容,如果未能解决你的问题,请参考以下文章

缩放 html 以根据屏幕分辨率按比例调整大小

将任何文档缩放为 A4 格式

phantomjs 使内容适合 A4 页面

使用 jQuery 按比例调整 iframe 的大小以适合 DIV

使用 jQuery 按比例调整 iframe 的大小以适合 DIV

Java以正确的比例打印现有的pdf