共计 3059 个字符,预计需要花费 8 分钟才能阅读完成。
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳 GitHub 博客, 一年百来篇优质文章等着你!
在一些场景下,用户都要求一些需要的数据能以 pdf 的格式下载下来。如电子商务商店,经常需要一些报表数据来分析当月的销售情况。
在本文中,将探讨如何从一个 web 应用程序中直接生成一个 PDF。这不是一个生成 PDF 库列表,这里主要的目的是展示不同生成 PDF 的方法。如果你有自己喜欢的工具或任何经验可以在评论中分享给我们。
从 HTML 和 CSS 开始
首先考虑如何使用 HTML 和 CSS 生成 PDF 版本。
CSS 确实有一个处理打印 CSS 的规范,就是 Paged Media module。之前的文章《用 CSS 设计打印格式》中概述了这个规范,许多图书出版商在他们所有的打印输出中都使用了 CSS。因此,CSS 本身就有打印材料的规格,我们当然应该能够使用它?
用户生成 PDF 的最简单方法是直接通过的浏览器,选择打印 PDF,将生成一个 PDF。可悲的是,这个 PDF 通常并不完全令人满意!首先,它会有页眉和页脚,当你从网页打印内容时,这些页眉和页脚会自动添加。当然如果你有一个样式表,它也会根据打印样式表进行格式化。
用浏览器直接打印的一个问题是浏览器对片断规范 (fragmentation) 的支持不足。这可能意味着你的页面内容以不同寻常的方式中断。这说明你可能无法防止内容的次优中断,如标题将作为页面上的最后一项保留,依此类推。
此外,我们无法控制页边距框中的内容,例如 将我们选择的标题添加到每个页面或页码编号,以显示页数。这些内容是 Paged Media 规范的一部分,但尚未在任何浏览器中实现。
使用浏览器渲染引擎打印
还有一些方法可以使用浏览器渲染引擎将文档打印成 PDF,而不需要在浏览器中使用打印的菜单,并且以页眉和页脚结束。在我之前的的推文时,最受欢迎的选项是 wkhtmltopdf
,以及使用 无头 Chrome
和 Puppeteer
打印。
WKHTMLTOPDF
wkhtmltopdf
接受 HTML 文件或多个文件,以及样式表,并将其转换为 PDF。它通过使用 WebKit 渲染引擎来实现这一点。
因此,从本质上讲,这个工具与与浏览器打印效果是一样的,但是,不会得到自动添加的页眉和页脚。从乐观上讲,如果你有一个可用于内容的打印样式表,那么可以使用这个工具很好地打印 PDF,因此一个简单的布局可能打印得更好。
然而,不幸的是,由于不支持分页媒体规范和片段 (fragmentation) 属性,仍然会遇到与直接从 web 浏览器打印相同的问题,因为仍然使用的是浏览器渲染引擎进行打印。
可以将一些标志传递到 wkhtmltopdf 中,以便使用分页媒体规范在缺省情况下添加一些缺失的特性。然而,这确实需要一些额外的工作,除了写好的 HTML 和 CSS。
无头 Chrome
另一种是使用无头的谷歌浏览器来打印 PDF。
然而,再次受到浏览器对 Paged Media 和 fragmentation 支持的限制。有一些选项可以传递到 page.pdf()
函数中。与 wkhtmltopdf 一样,如果有浏览器支持,添加了一些 CSS 提供的功能。
很可能这些解决方案中的一个可以满足你的所有需求,但是,如果发现你正在进行某种程度的任务,很可能已经达到了当前浏览器渲染引擎的极限,这就需要寻找更好的解决方案。
使用 JavaScript 来实现 Paged Media 规范
尝试使用 JavaScript 实现 Paged Media 规范 – 实际上是创建了 Paged Media Polyfill。也可以在使用 Puppeteer 提供对 Paged Media 支持。看看 paged.js 和 Vivliostyle。
使用打印用户代理
如果你想继续使用 HTML 和 CSS 解决方案,那么你需要查看用于从 HTML 和 CSS 打印的用户代理(UA),其中包含用于从文件生成 PDF 的 API。这些用户代理实现了 Paged Media 规范,并且对 CSS Fragmentation 属性有了更好的支持;,这样可以更好地控制输出:主要选择包括:
- Prince
- Antenna House
- PDFReactor
打印 UA 将像 web 浏览器一样使用 CSS 格式化文档。与浏览器支持 CSS 一样,需要查看这些 UA 的的文档,以了解它们支持什么。例如,Prince
在编写本文时支持 Flexbox,但不支持 CSS 网格布局。当将页面发送到正在使用的工具时,通常会使用一个用于打印的特定样式表。与常规打印样式表一样,我在站点上使用的 CSS 并不都适合 PDF 版本。
为这些工具创建样式表与创建常规打印样式表非常相似,可能使用不同的字体大小或颜色来决定显示或隐藏什么。然后,可以利用 分页媒体规范(Paged Media specification)中的功能,添加脚注、页码等。
就从 web 应用程序使用这些工具而言,需要在服务器上安装它们。这些工具的主要问题是它们很昂贵。也就是说,考虑到你可以轻松地使用它们生成打印文档,它们可能会在节省的开发人员时间中得到很好的回报。
可以通过 API(按文档付费)通过 DocRaptor 服务使用 Prince。对于许多应用程序来说,这无疑是一个很好的起点,因为它看起来似乎可以使你自己的主机变得更加经济有效,而切换的开发成本将是最小的。
一个免费的替代方案是 WeasyPrint,它不像上面的工具那么全面,但很有可能已经满足你的需求。它没有完全实现所有分页媒体规范,但是,它实现的比浏览器引擎更多。当然,你可以试试!
声称支持从 HTML 和 CSS 转换的其他工具包括 PDFCrowd,它大胆声称支持 HTML5,CSS3 和 JavaScript。但是,我无法找到关于支持的确切内容的任何细节,以及是否有任何分布媒体规范。
不使用 HTML 和 CSS
还有许多其他的解决方案,它们不再使用 HTML 和 CSS,而是要求你为工具创建特定的输出。下面是对应的工具:
- jsPDF
- pdfmake
推荐
除了基于 javascript 的方法 (它要求打印内容创建完全不同的表示形式) 之外,这些解决方案的优点在于它们是可互换的。如果你的解决方案基于调用命令行工具,并将该工具传递给你的 HTML、CSS,可能还传递一些 JavaScript,那么在工具之间切换是相当简单的。
为了支持分布媒体和 fragmentation,Prince,Antenna House 和 PDFReactor 可以作为首选。作为商业产品,他们也得到了支持。
但是,在许多情况下,免费工具也很适合。如果你的的需求非常简单,那么 wkhtmltopdf,或者基本的 无头 Chrome 和 Puppeteer就可以解决问题。
但是,如果你发现打印的结果不是自己想要的,请注意这可能是浏览器打印的限制,而不是你做错了什么。如果你想要更多的页面媒体支持,但又无法获得商业产品,也许可以看看 WeasyPrint。
希望这是一个有用的工具总结,可用帮你的 web 应用程序创建 pdf。
工具
- wkhtmltopdf
- paged.js
- Vivliostyle
- Prince
- Antenna House
- PDFReactor
- DocRaptor
- WeasyPrint
- PDFCrowd
- mPDF
- jsPDF
- pdfmake
- Produce & Publish Server
交流
干货系列文章汇总如下,觉得不错点个 Star,欢迎 加群 互相学习。
https://github.com/qq44924588…
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复 福利,即可看到福利,你懂的。