您好,登錄后才能下訂單哦!
最近在項目中遇到需要把html頁面轉(zhuǎn)換為pdf的需求,并且轉(zhuǎn)換成的pdf文件要保留原有html的樣式和圖片。也就是說,html頁面的圖片、表格、樣式等都需要完整的保存下來。
最初找到三種方法來實現(xiàn)這個需求,這三種方法都只是粗淺的看了使用方法,從而找出適合這個需求的方案:
html-pdf 模塊
wkhtmltopdf 工具
phantom 模塊
最終使用了phantom模塊,也達(dá)到了預(yù)期效果。現(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)換為對應(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'); //........ }); }); /** * 這種方法沒有渲染樣式和圖片 * @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
即可生成對應(yīng)的PDF文件。
代碼使用:
var wkhtmltopdf = require('wkhtmltopdf'); var fs = require('fs'); // URL 使用URL生成對應(yīng)的PDF wkhtmltopdf('http://github.com', { pageSize: 'letter' }) .pipe(fs.createWriteStream('out.pdf'));
除了可以通過URL生成之外,還能通過HTML文件內(nèi)容生成,就像HTML-PDF一樣,只要有HTML格式的字符串就可以生成相應(yīng)的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就相當(dāng)于對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)換為相應(yīng)的PDF,而且能夠通過 page.property('viewportSize',{width:width,height:height}) 來設(shè)置生成的PDF的寬度和高度。
此例phantom中并沒有分頁,它是以整個瀏覽器截圖的形式,獲取全文,轉(zhuǎn)化為PDF格式。
選擇phantom的主要原因就是便于設(shè)置PDF的寬度,更能兼容HTML的排版。
結(jié)果如下:
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。