在Nodejs中使用幻像将html转换为pdf或图片格式的方法

最近，在项目中，需要将html页面转换为pdf文件，转换后的pdf文件应该保持原始的html样式和图片。也就是说，html页面的图片、表格和样式需要完全保留。

最初发现有三种方法可以实现这个需求，这三种方法都只是肤浅地看待使用方法，从而找出适合这个需求的方案：

Html-pdf模块wkhtmltopdf工具幻影模块最终使用了幻影模块，并达到了预期的效果。现在我们简单记录下这三种方式的用法以及它们之间的主要区别。

1.html-pdf

github :https://github.com/marcbachmann/node-html-pdfnpm :https://www . npmjs.com/package/html-pdf

安装：

npm安装-g html-pdf

使用命令行：

index.html

这样，您可以将index.html页面转换为相应的index.pdf文件。

使用代码：

var express=require(' express ')；var路由器=express。路由器()；var pdf=require(' html-pdf ')；router.get('/url '，function(req，res){ res.render('html '，function(err，html){ html2Pdf(html，' html . pdf ')；//.});});/* * *此方法中没有呈现样式和图片* @ param URL * @ param pdf name */exports . html 2pdf=function(html，pdf name){ varoptions={ format : true }；pdf.create(html，选项)。toFile(_ dirname/' PdFname，function(err，RES){ if(err)return console . log(err)；console . log(RES)；});};测试过程中发现生成的pdf文件不支持样式渲染和图片加载，无法支持加载html直接通过网址。但是在分页支持方面非常好。

结果如下：

2、wkhtmltopdf

Github:https://github.com/wkhtmltopdf/wkhtmltopdf官方文件：https://wkhtmltopdf.org

Npm:https://www.npmjs.com/package/wkhtmltopdfwkhtmltopdf在效果上比html-pdf好得多。它支持样式渲染、图片加载，可以通过url直接生成PDF文件。但是安装起来就麻烦多了。具体安装步骤请参考此处

安装后，使用命令行：

https://github.comgithub.pdf

可以生成相应的PDF文件。

代码用法：

var wkhtmltopdf=require(' wkhtmltopdf ')；var fs=require(' fs ')；//URL使用URL生成对应的pdfwkhtmltodf ('http://github.com '，{pagesize:' letter'})。管道(fs . create write stream(' out . pdf '))；除了通过URL生成，还可以通过HTML文件内容生成，就像HTML-PDF一样，只要有一个HTML格式的字符串，就可以生成对应的PDF。

结果如下：

3.幻影模块

Github:https://github.com/amir20/phantomjs-node官方文档：http://amirraminfar.com/phantom js-node/NPM :3359 www.npmjs.com/package/芬托姆js是基于webkit的无头浏览器，提供相关的JavaScript API。nodejs相当于Phantom JS的模块化封装，使得它可以在nodejs中使用。

模块安装：

节点版本6。十及以上：

npm安装幻影保存

在节点版本5上。x:

npm安装[email protected]保存

节点版本4。十及以下：

npm安装[email protected]保存

以下示例均基于node4.x。

代码用法：

var phantom=require(' phantom ')；phantom.create()。然后(函数(ph) { ph.createPage()。然后(function(page){ page . open(' https://www . Oracle.com/index . html ')。然后(function(status){ page . property(' viewport size '，{width: 10000，height : 500 })；page.render('/oracle10000.pdf ')。然后(function(){ console . log(' Page rendered '))；ph . exit()；});});});});在代码中，可以通过URL将phantom转换为对应的PDF，通过page.property ('viewportsize '，{width: width，height: height})设置生成的PDF的宽度和高度。

在本例中，幻像中没有分页。它取整个浏览器截图形式的全文，转换成PDF格式。

选择幻影的主要原因是方便设置PDF的宽度，更兼容HTML排版。

结果如下：