汕头网站开发:如何从Web应用程序创建PDF

2019.08.14 mf_web

58

许多Web应用程序都要求用户能够以PDF格式下载内容。对于应用程序(例如电子商务商店),必须使用动态数据创建这些PDF,并立即向用户提供。

汕头网站开发在本文中,我将探讨如何直接从Web应用程序生成PDF。它不是一个全面的工具列表,而是我的目标是展示不同的方法。如果您有喜欢的工具或您自己的任何经验,请将它们添加到下面的评论中。

从HTML和CSS开始

我们的Web应用程序可能已经使用将添加到PDF中的信息创建HTML文档。如果是发票,用户可能可以在线查看信息,然后单击下载PDF以获取其记录。您可能正在创建装箱单; 再一次,信息已经存在于系统内。您希望以一种很好的方式格式化下载和打印。因此,一个好的起点是考虑是否可以使用该HTML和CSS生成PDF版本。

CSS确实有一个处理CSS打印的规范,这是Paged Media模块。我在文章“ 使用CSS设计打印 ”中对此规范进行了概述,许多图书发布者都使用CSS来获取所有打印输出。因此,由于CSS本身有印刷材料的规格,我们当然应该能够使用它吗?

用户可以通过浏览器生成PDF的最简单方式。通过选择打印到PDF而不是打印机,将生成PDF。可悲的是,这个PDF通常不是完全令人满意的!首先,它将具有在您从网页打印内容时自动添加的页眉和页脚。它也将根据您的打印样式表进行格式化 - 假设您有一个。

我们遇到的问题是浏览器中碎片规范的支持不足; 这可能意味着您的网页内容以不寻常的方式中断。支持碎片是不完整的,正如我在研究我的文章“ 用CSS碎片打破盒子 ”时发现的那样。这意味着您可能无法阻止内容的次优,标题被保留为页面上的最后一项,依此类推。

此外,我们无法控制页边距框中的内容,例如,为每个页面添加我们选择的标题或页码编号以显示复杂发票的页数。这些内容是Paged Media规范的一部分,但尚未在任何浏览器中实现。

使用浏览器渲染引擎进行打印

有一些方法可以使用浏览器渲染引擎打印到PDF,而无需浏览器中的打印菜单,最后是页眉和页脚,就像打印文档一样。响应我推文的最受欢迎的选项是wkhtmltopdf,以及使用无头Chrome和Puppeteer进行打印。

WKHTMLTOPDF

在Twitter上多次提到的解决方案是一个名为wkhtmltopdf的命令行工具。此工具将获取HTML文件或多个文件以及样式表,并将其转换为PDF。它通过使用WebKit渲染引擎来实现。

我们使用wkhtmltopdf。它并不完美,虽然这可能是用户错误,但对于生产应用程序来说很容易就足够了。

- Paul Cardno(@pcardno)2019年2月15日

因此,本质上,此工具与从浏览器打印相同,但是,您将无法获得自动添加的页眉和页脚。在这个积极的方面,如果你有一个适用于你的内容的工作打印样式表,那么它也应该使用这个工具很好地输出到PDF,因此一个简单的布局可以很好地打印。

然而,遗憾的是,您仍然遇到与直接从Web浏览器打印时相同的问题,因为您仍然缺乏对Paged Media规范和碎片属性的支持,因为您仍在使用浏览器渲染引擎进行打印。您可以将一些标记传递到wkhtmltopdf,以便使用Paged Media规范添加一些默认功能。但是,这需要在编写优秀的HTML和CSS之上进行一些额外的工作。

无头CHROME

另一个有趣的可能性是使用Headless Chrome和Puppeteer打印到PDF。

木偶。这真是太棒了。

- Alex Russell(@slightlylate)2019年2月15日

但是,再次受限于浏览器对Paged Media和碎片的支持。有一些选项可以传递给page.pdf()函数。与wkhtmltopdf一样,如果有浏览器支持,这些功能可以添加一些CSS功能。

很可能这些解决方案中的一个会完成您所需要的所有操作,但是,如果您发现自己正在与某场战斗作斗争,那么很可能您正在达到当前浏览器渲染引擎的极限,并且需要寻找更好的解决方案。

用于分页媒体的JAVASCRIPT POLYFILL

有一些尝试使用JavaScript在浏览器中实质上重现Paged Media规范 - 实际上是创建了Paged Media Polyfill。这可以在使用Puppeteer时为您提供Paged Media支持。看看paged.js和Vivliostyle。

是。对于简单的文档,例如课程证书,我们可以使用Chrome,它具有最小的@页面支持。除此之外,我们在Chrome中使用PrinceXML或paged.js polyfill。这是使用paged.js书籍的WIP概念验证:https://t.co/AZ9fO94PT2

- 电子书作品(@electricbook)2019年2月15日

使用打印用户代理

如果您想继续使用HTML和CSS解决方案,那么您需要查看用于从HTML和CSS打印的用户代理(UA),其中包含用于从文件生成PDF的API。这些用户代理实现了Paged Media规范,并且对CSS Fragmentation属性有了更好的支持; 这样可以更好地控制输出。主要选择包括:

  • 王子

  • 天线之家

  • PDFReactor

打印UA将使用CSS格式化文档 - 就像Web浏览器一样。与浏览器对CSS的支持一样,您需要检查这些UA的文档以找出它们支持的内容。例如,Prince(我最熟悉的)在撰写本文时支持Flexbox而不支持CSS Grid Layout。将页面发送到您正在使用的工具时,通常会使用特定的打印样式表。与常规打印样式表一样,您在网站上使用的CSS并不适用于PDF版本。

为这些工具创建样式表非常类似于创建常规打印样式表,根据要显示或隐藏的内容做出决策,可能使用不同的字体大小或颜色。然后,您就可以利用分页媒体规范中的功能,添加脚注,页码等。

在从Web应用程序中使用这些工具方面,您需要将它们安装在您的服务器上(当然,已经购买了许可证)。这些工具的主要问题是它们很昂贵。也就是说,考虑到您可以轻松地使用它们生成打印文档,他们可能会在开发人员节省时间内收回成本。

可以通过API(按文档付费)通过名为DocRaptor的服务使用Prince。对于许多应用程序来说,这肯定是一个很好的起点,好像它看起来好像托管你自己的更具成本效益,转换的开发成本是最小的。

WeasyPrint是一个免费的替代品,它不像上面的工具那么全面,但很可能达到你需要的结果。它没有完全实现所有的Paged Media,但它实现的不仅仅是浏览器引擎。绝对是一个尝试!

声称支持从HTML和CSS转换的其他工具包括PDFCrowd,它大胆声称支持HTML5,CSS3和JavaScript。但是,我无法找到关于支持的确切内容的任何细节,以及是否有任何Paged Media规范。在我的推文回复中也提到了mPDF。

远离HTML和CSS

还有许多其他解决方案,它们不再使用HTML和CSS,而是要求您为该工具创建特定的输出。一些JavaScript竞争者如下:

  • jsPDF

  • pdfmake

无头浏览器+保存为PDF曾经是我的第一选择,但总是为单页文档以外的任何内容生成低于标准的结果。我们切换到https://t.co/3o8Ce23F1t进行多页报告,这需要付出相当多的努力,但最终还是值得的!

- JimmyJoy(@jimle_uk)2019年2月15日

建议

除了基于JavaScript的方法,这需要您创建一个完全不同的内容表示打印,许多这些解决方案的美妙之处在于它们是可互换的。如果您的解决方案基于调用命令行工具,并将该工具传递给您的HTML,CSS以及可能的JavaScript,那么在工具之间切换是相当简单的。

在撰写本文的过程中,我还发现了一个可以运行许多不同工具的Python包装器。(请注意,您需要已经安装了工具本身,但是,这可能是测试示例文档上的各种工具的好方法。)

为了支持Paged Media和支离破碎,Prince,Antenna House和PDFReactor将会名列前茅。作为商业产品,他们也得到了支持。如果您有预算,要打印到PDF的复杂页面,并且您的限制是开发人员时间,那么您很可能会发现这些是使PDF创建良好运行的最快途径。

但是,在许多情况下,免费工具将适合您。如果您的要求非常简单,那么wkhtmltopdf,或者基本的无头Chrome和Puppeteer解决方案可以解决问题。对于许多回复我原始推文的人来说,它似乎肯定有效。

但是,如果您发现自己难以获得所需的输出,请注意它可能是浏览器打印的限制,而不是您做错的任何事情。如果您希望获得更多Paged Media支持,但无法获得商业产品,请查看WeasyPrint。

我希望这是可用于从Web应用程序创建PDF的工具的有用综述。如果没有别的,它表明如果您的初始选择不能很好地有各种各样的选择。

请在评论中添加您自己的经验和建议,这是我们很多人最终处理的事情之一,并且共享的个人经验可以非常有用。

汕头网站开发

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP