HTML5到PDF服务器端

Oli*_*ier 15 printing pdf html5 creation css3

我正在寻找一种从HTML5/CSS3文档serveride生成PDF的解决方案.

我知道有很多创建PDF的解决方案(如FOP,iText ......),但我需要确保它看起来与HTML页面完全相同.所以,我不想按FOP或iText这样的元素创建PDF元素.

实际上,应该存在某些东西,因为这是您从浏览器中以PDF格式打印时所执行的操作.理想情况下,解决方案应嵌入Web浏览器引擎(webkit或gecko).我试过wkHtmlToPdf ...但结果并不好(HTML5画布甚至没有打印......)

如果有人知道任何解决方案,无论是否免费,任何语言...我会很感激!谢谢!!

Tim*_*nen 24

我使用PhantomJS从网页生成png图像,它也可以生成PDF,质量通常也很好.该属性称为屏幕捕获,在此处描述.支持的格式为PNG,JPEG,GIF和PDF.

转换为PDF时,页面文本保留为文本.

在测试了其他几个库或程序后,发现PhantomJS是最完美的解决方案.PhantomJS使用WebKit,一个真正的布局和渲染引擎.

https://github.com/ariya/phantomjs/wiki/Examples中的例子很少.在Rendering/rasterization部分中,提到了以下脚本,可帮助您完成此过程:

rasterize.js rasterizes a web page to image or PDF
Run Code Online (Sandbox Code Playgroud)

PhantomJS QuicStart指南说:

可以生成PDF输出,例如来自维基百科的文章:

phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf
Run Code Online (Sandbox Code Playgroud)

或者在创建打印机就绪备忘单时:

phantomjs rasterize.js http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm webgl.pdf
Run Code Online (Sandbox Code Playgroud)

我测试了几页的pdf生成,如果页面遵循标准,它会产生很好的结果.文本是可选择的,可打印为高质量,但在某些页面上,pdf中的布局与png中的布局不同.以下是使用命令生成的两个屏幕截图:

$ phantomjs rasterize.js 'http://windows.microsoft.com/en-US/windows/home' microsoft.png

$ phantomjs rasterize.js 'http://windows.microsoft.com/en-US/windows/home' microsoft.pdf 
Run Code Online (Sandbox Code Playgroud)

使用Phantomjs生成png和pdf的示例

我也测试了http://lab.simurai.com/buttons/.pdf和png非常相同,下面是pdf的样本,我将其光栅化为5641px宽并裁剪了一个区域.与之前的PDF示例一样,文本可以在PDF中选择,如您所见,文本很清晰(没有抗锯齿!).

CSS3Buttons

INSTALLING

我首先尝试在Centos5上从源代码编译安装Qt库和PhantomJS,但没有运气.然后在Ubuntu 11.10上,这个过程很简单:

我下载了http://phantomjs.googlecode.com/files/phantomjs-1.7.0-linux-x86_64.tar.bz2并使用它提取

tar -xjvf phantomjs-1.7.0-linux-x86_64.tar.bz2
Run Code Online (Sandbox Code Playgroud)

然后将phantomjs可执行文件复制到系统的bin目录:

$ cp phantomjs-1.7.0-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs
Run Code Online (Sandbox Code Playgroud)

而phantomjs准备好了.

如果生成的PDF不好,您可能会尝试更新Webkit,但我认为结果应该足够了.PhantomJS具有出色的更新周期,因此应在合理的时间内修复错误.

PhantomJS FAQ也提供了很好的可能性信息.


zem*_*rco 0

您在服务器端使用什么语言?

创建页面的屏幕截图,然后将图像转换为 pdf 可能会给您带来最佳结果。它将显示与浏览器呈现的页面完全相同的页面。

有一些屏幕截图即服务工具,例如browshot.com。查看API支持的语言

或者您可以使用您的工具。对于node.js,github上有一个不错的项目。