快捷導(dǎo)航

Nodejs中使用phantom將html轉(zhuǎn)為pdf或圖片格式的方法

更新時(shí)間：2017年09月18日 23:08:14 投稿：mdxy-dxy

這篇文章主要介紹了Nodejs中使用phantom將html轉(zhuǎn)為pdf或圖片格式的方法,需要的朋友可以參考下

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

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

html-pdf 模塊
wkhtmltopdf 工具
phantom 模塊
最終使用了phantom模塊，也達(dá)到了預(yù)期效果。現(xiàn)在簡(jiǎ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頁(yè)面轉(zhuǎn)換為對(duì)應(yīng)的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');
  //........
 });
})；

/**
 * 這種方法沒(méi)有渲染樣式和圖片
 * @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);
 });
};

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

結(jié)果如下：

這里寫(xiě)圖片描述

2、wkhtmltopdf

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

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

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

wkhtmltopdf https://github.com github.pdf

即可生成對(duì)應(yīng)的PDF文件。

代碼使用：

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


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

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

結(jié)果如下：

這里寫(xiě)圖片描述

3、phantom 模塊

github:https://github.com/amir20/phantomjs-node
官方文檔：http://amirraminfar.com/phantomjs-node/
npm:https://www.npmjs.com/package/phantom
phantomjs是基于webkit的無(wú)頭瀏覽器，提供相關(guān)的JavaScript API，nodejs就相當(dāng)于對(duì)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能夠通過(guò)URL轉(zhuǎn)換為相應(yīng)的PDF，而且能夠通過(guò) page.property('viewportSize',{width:width,height:height}) 來(lái)設(shè)置生成的PDF的寬度和高度。

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

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

結(jié)果如下：

這里寫(xiě)圖片描述