由于甲方爸爸的需要,最近使用phantomjs和Node寫(xiě)了一個(gè)對(duì)網(wǎng)頁(yè)內(nèi)容截屏的功能，為了避免忘記,現(xiàn)在將代碼內(nèi)容及配置流程大概描述一下.
1.首先Node是必須安裝的,而且網(wǎng)上安裝教程一大堆,在此不再贅述,Nodejs官網(wǎng)鏈接
2.然后,第二個(gè)主人公是phantomjs,官網(wǎng)下載地址，選擇對(duì)應(yīng)的系統(tǒng)下載對(duì)應(yīng)的安裝包
3.將phantomjs配置為系統(tǒng)變量,下面是Windows配置為環(huán)境變量:
配置完成之后,在cmd命令行中輸入 phantomjs -v 檢驗(yàn)是否配置成功,配置成功之后，如下圖所示:
4.擼代碼,通過(guò)查閱phantomjs入門(mén)代碼之后,了解到使用phantomjs可以預(yù)覽一個(gè)網(wǎng)頁(yè)生成圖片,PDF,base64格式等等,而我們的項(xiàng)目需要的并不是一個(gè)完整的網(wǎng)頁(yè),而是網(wǎng)頁(yè)中的一部分內(nèi)容,所以在此基礎(chǔ)之上要改造部門(mén)內(nèi)容,現(xiàn)在講解一下代碼:
4.1)首先是express的一些設(shè)置,由于需要執(zhí)行phantomjs的命令,所以需要引入child_process模塊,具體代碼如下:
var process = require('child_process');//執(zhí)行命令行所需var express = require('express');//expressvar bodyParser = require('body-parser');var fs = require("fs");//文件操作var app = express(); app.use('/pages',express.static('pdfs'));//設(shè)置靜態(tài)資源目錄app.use(bodyParser.json({limit:'50mb'}));//請(qǐng)求內(nèi)容大小限制app.use(bodyParser.urlencoded({limit:'50mb',extended:false})); //設(shè)置允許跨域訪問(wèn)var allowCrossDomain = function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); res.header('Access-Control-Allow-Credentials','true'); next();}; app.use(allowCrossDomain);4.2)然后就是生成頁(yè)面的base64接口的方法,如下:
app.get('/getBase64',function(req,res){ var url=req.query.url;//讀取請(qǐng)求中的url參數(shù),然后訪問(wèn)這個(gè)url url=url.replace(/&/g,'%26');//將請(qǐng)求中的&轉(zhuǎn)換 var resp={ "status":'200' } res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});//設(shè)置響應(yīng)頭 if(url==''){ resp.msg='url參數(shù)不能為空'; res.end(JSON.stringify(resp)); } else{ //phantomjs執(zhí)行的命令行 index.js在后文中給出 var strShell='phantomjs --disk-cache=true --disk-cache-path=. index.js '+url; process.exec(strShell,{ maxBuffer:5000*1024, },function(error,stdout,strerr){ if(error!==null){ console.log(error); resp.msg='轉(zhuǎn)換失敗，稍后重試'; res.end(JSON.stringify(resp)); }else{ //執(zhí)行成功則返回base64的數(shù)據(jù) resp.data=stdout; res.end(JSON.stringify(resp)); } }) } })4.3)phantomjs執(zhí)行的腳本,即index.js,如下:
var page = require('webpage').create();//獲取webpagevar system = require('system'), address; if (system.args.length === 1) {//執(zhí)行的命令應(yīng)該包括請(qǐng)求的URL，否則退出phantom console.log('Usage: URL error'); phantom.exit();}address = system.args[1];//請(qǐng)求的地址address = address.replace(/%26/g, '&');//phantom不能識(shí)別%26,所以轉(zhuǎn)為&page.viewportSize = {//設(shè)置viewport width: 1920, height: 1080,}page.open(address, function(status) {//打開(kāi)頁(yè)面 setTimeout(function() {//2s之后獲取base64結(jié)果,如果直接生成有可能頁(yè)面還沒(méi)有加載完成 if (status == 'success') { var base64 = page.renderBase64('PNG'); console.log(base64);//將base64結(jié)果輸出之后,在上邊的getBase64接口中獲取 phantom.exit(); } }, 2000);})4.4）獲取頁(yè)面中部分內(nèi)容的截圖,可以將需要截圖的DOM字符串,發(fā)送至后臺(tái),然后新建一個(gè)空的頁(yè)面,使用phantom訪問(wèn)該空白頁(yè)面,并將DOM字符串添加到預(yù)覽的頁(yè)面,然后生成截圖,具體代碼如下:
app.post('/getPartPage', function(req, res) { var xmlObj = req.body.xmlObj;//獲取DOM字符串 const reqUrl = 'http:example.com/tmp.html';//要訪問(wèn)的空頁(yè)面 var response = { "status": '200', }; if (xmlObj == undefined || xmlObj == '' || xmlObj == null) { response.msg = 'DOM字符串內(nèi)容未輸入'; res.end(JSON.stringify(response)); }else { fs.writeFile('tmp.txt', xmlObj, function(err) { //由于dom字符串內(nèi)容過(guò)多,所以寫(xiě)入txt文本 if (err) { response.msg = '生成頁(yè)面失敗,請(qǐng)稍后重試'; return res.end(JSON.stringify(response)); } var strShell = 'phantomjs pages/index.js ' + reqUrl;//phantomjs執(zhí)行的命令 process.exec(strShell, { maxBuffer: 5000 * 1024, }, function(error, stdout, strerr) { if (error !== null) { response.msg = '腳本執(zhí)行錯(cuò)誤,請(qǐng)稍后重試'; res.end(JSON.stringify(response)); } else { response.data = stdout.replace("/r/n", ""); res.end(JSON.stringify(response));//返回結(jié)果 } }) }) } }) var server = app.listen(8808,function(){ //接口監(jiān)聽(tīng),訪問(wèn)的端口 var host = server.address().address var port = server.address().port console.log('http://%s:%s',host,port);})4.5)pages下的index.js內(nèi)容如下所示:
var page = require('webpage').create();//獲取webpagevar fs = require('fs');var system = require('system'), address,filename; if (system.args.length === 1) { console.log('Usage: URL error'); phantom.exit();}address = system.args[1];//請(qǐng)求的路徑address = address.replace(/%26/g, '&');filename = (new Data()).getTime();page.viewportSize = { width: 750,}page.paperSize = { //生成A4大小的PDF文件 format: 'A4', orientation: 'portrait', margin: '0.8cm'}page.open(address, function(status) { var info = fs.read('tmp.txt');//讀取DOM字符串 var result = page.evaluate(function(info) { try { document.querySelector('#dom').innerHTML = info;//將dom字符串拼接 } catch (e) { console.log(e); } return document.querySelector('#dom').innerHTML;//返回頁(yè)面 }, info); setTimeout(function() { page.paperSize = { format: 'A4', orientation: 'portrait', margin: '0.8cm' }; page.viewportSize = { width: 750, }; //生成PDF文件 page.render('pages/' + filename + '.pdf', { format: 'pdf', quality: '100' }); console.log('http://example.com/pages/' + filename + '.pdf');//返回PDF文件的訪問(wèn)路徑 phantom.exit(); }, 500);})OK，以上就是全部接口的內(nèi)容,全部的代碼可以訪問(wèn)https://github.com/kim095/node-phantom進(jìn)行下載.希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
