最近在項目中遇到需要把html頁面轉(zhuǎn)換為pdf的需求，并且轉(zhuǎn)換成的pdf文件要保留原有html的樣式和圖片。也就是說，html頁面的圖片、表格、樣式等都需要完整的保存下來。

最初找到三種方法來實現(xiàn)這個需求，這三種方法都只是粗淺的看了使用方法，從而找出適合這個需求的方案：

html-pdf 模塊
wkhtmltopdf 工具
phantom 模塊
最終使用了phantom模塊，也達到了預期效果?，F(xiàn)在簡單的記錄三種方式的使用方法，以及三者之間主要的不同之處。

1.html-pdf

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

安裝：

npm install -g html-pdf

使用命令行：

html-pdf /test/index.html index.pdf

這樣便可以把index.html頁面轉(zhuǎn)換為對應的index.pdf文件。

使用代碼：

var express = require('express');
var router = express.Router();
var pdf = require('html-pdf');

router.get('/url',function(req,res){
 res.render('html',function(err,html){
  html2Pdf(html,'html.pdf');
  //........
 });
})；

/**
 * 這種方法沒有渲染樣式和圖片
 * @param url
 * @param pdfName
 */
exports.html2Pdf = function(html,pdfName){
 var options = {format:true};
 pdf.create(html,options).toFile(__dirname+'/'+pdfName,function(err,res){
  if (err) return console.log(err);
  console.log(res);
 });
};

在測試過程中發(fā)現(xiàn)，生成的pdf文件中并沒有支持樣式渲染和圖片加載，不能支持通過url直接加載html；但是在分頁的支持上很好。

結(jié)果如下：

2、wkhtmltopdf

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

npm:https://www.npmjs.com/package/wkhtmltopdf
wkhtmltopdf在效果上比較html-pdf要好很多，它支持樣式渲染，圖片加載，還可以通過url直接生成PDF文件。
但是安裝上要麻煩得多。具體安裝步驟參考這里

安裝完畢之后，使用命令行：

wkhtmltopdf https://github.com github.pdf

即可生成對應的PDF文件。

代碼使用：

var wkhtmltopdf = require('wkhtmltopdf');
var fs = require('fs');


// URL 使用URL生成對應的PDF
wkhtmltopdf('http://github.com', { pageSize: 'letter' })
 .pipe(fs.createWriteStream('out.pdf'));

除了可以通過URL生成之外，還能通過HTML文件內(nèi)容生成，就像HTML-PDF一樣，只要有HTML格式的字符串就可以生成相應的PDF。

結(jié)果如下：

3、phantom 模塊

github:https://github.com/amir20/phantomjs-node
官方文檔：http://amirraminfar.com/phantomjs-node/
npm:https://www.npmjs.com/package/phantom
phantomjs是基于webkit的無頭瀏覽器，提供相關(guān)的JavaScript API，nodejs就相當于對phantomjs的模塊化封裝，使得它能夠在nodejs中使用。

模塊安裝：

node版本6.X以上的：

npm install phantom –save

node版本5.X的：

npm install phantom@3 –save

node版本4.X及以下的：

npm install phantom@2 –save

以下的例子都是基于node 4.x

代碼使用：

var phantom = require('phantom');

phantom.create().then(function(ph) {
 ph.createPage().then(function(page) {
  page.open("https://www.oracle.com/index.html").then(function(status) {
   page.property('viewportSize',{width: 10000, height: 500});
   page.render('/oracle10000.pdf').then(function(){
    console.log('Page rendered');
    ph.exit();
   });
  });
 });
});

代碼中，phantom能夠通過URL轉(zhuǎn)換為相應的PDF，而且能夠通過 page.property('viewportSize',{width:width,height:height}) 來設置生成的PDF的寬度和高度。

此例phantom中并沒有分頁，它是以整個瀏覽器截圖的形式，獲取全文，轉(zhuǎn)化為PDF格式。

選擇phantom的主要原因就是便于設置PDF的寬度，更能兼容HTML的排版。

結(jié)果如下：