使用Phantomjs和Node完成网页的截屏快照的方法

前端  /  管理员 发布于 5年前   434

由于甲方爸爸的需要,最近使用phantomjs和Node写了一个对网页内容截屏的功能，为了避免忘记,现在将代码内容及配置流程大概描述一下.

1.首先Node是必须安装的,而且网上安装教程一大堆,在此不再赘述,Nodejs官网链接

2.然后,第二个主人公是phantomjs,官网下载地址，选择对应的系统下载对应的安装包

3.将phantomjs配置为系统变量,下面是Windows配置为环境变量:

配置完成之后,在cmd命令行中输入 phantomjs -v 检验是否配置成功,配置成功之后，如下图所示:

4.撸代码,通过查阅phantomjs入门代码之后,了解到使用phantomjs可以预览一个网页生成图片,PDF,base64格式等等,而我们的项目需要的并不是一个完整的网页,而是网页中的一部分内容,所以在此基础之上要改造部门内容,现在讲解一下代码:

4.1)首先是express的一些设置,由于需要执行phantomjs的命令,所以需要引入child_process模块,具体代码如下:

var process = require('child_process');//执行命令行所需var express = require('express');//expressvar bodyParser = require('body-parser');var fs = require("fs");//文件操作var app = express(); app.use('/pages',express.static('pdfs'));//设置静态资源目录app.use(bodyParser.json({limit:'50mb'}));//请求内容大小限制app.use(bodyParser.urlencoded({limit:'50mb',extended:false}));  //设置允许跨域访问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)然后就是生成页面的base64接口的方法,如下:

app.get('/getBase64',function(req,res){var url=req.query.url;//读取请求中的url参数,然后访问这个url  url=url.replace(/&/g,'%26');//将请求中的&转换 var resp={  "status":'200'}res.writeHead(200,{'Content-Type':'text/html;'});//设置响应头if(url==''){    resp.msg='url参数不能为空';    res.end(JSON.stringify(resp));  }else{    //phantomjs执行的命令行 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='转换失败，稍后重试';    res.end(JSON.stringify(resp));    }else{        //执行成功则返回base64的数据    resp.data=stdout;    res.end(JSON.stringify(resp));    }    })} })

4.3)phantomjs执行的脚本,即index.js,如下:

var page = require('webpage').create();//获取webpagevar system = require('system'),  address; if (system.args.length === 1) {//执行的命令应该包括请求的URL，否则退出phantom  console.log('Usage: URL error');  phantom.exit();}address = system.args[1];//请求的地址address = address.replace(/%26/g, '&');//phantom不能识别%26,所以转为&page.viewportSize = {//设置viewport  width: 1920,  height: 1080,}page.open(address, function(status) {//打开页面  setTimeout(function() {//2s之后获取base64结果,如果直接生成有可能页面还没有加载完成    if (status == 'success') {      var base64 = page.renderBase64('PNG');      console.log(base64);//将base64结果输出之后,在上边的getBase64接口中获取      phantom.exit();    }  }, 2000);})

4.4）获取页面中部分内容的截图,可以将需要截图的DOM字符串,发送至后台,然后新建一个空的页面,使用phantom访问该空白页面,并将DOM字符串添加到预览的页面,然后生成截图,具体代码如下:

app.post('/getPartPage', function(req, res) {  var xmlObj = req.body.xmlObj;//获取DOM字符串  const reqUrl = 'http:example.com/tmp.html';//要访问的空页面  var response = {    "status": '200',  };  if (xmlObj == undefined || xmlObj == '' || xmlObj == null) {    response.msg = 'DOM字符串内容未输入';    res.end(JSON.stringify(response));  }else {    fs.writeFile('tmp.txt', xmlObj, function(err) { //由于dom字符串内容过多,所以写入txt文本      if (err) {        response.msg = '生成页面失败,请稍后重试';        return res.end(JSON.stringify(response));      }       var strShell = 'phantomjs pages/index.js ' + reqUrl;//phantomjs执行的命令      process.exec(strShell, {        maxBuffer: 5000 * 1024,      }, function(error, stdout, strerr) {        if (error !== null) {          response.msg = '脚本执行错误,请稍后重试';          res.end(JSON.stringify(response));        } else {          response.data = stdout.replace("\r\n", "");          res.end(JSON.stringify(response));//返回结果        }       })     })   } }) var server = app.listen(8808,function(){ //接口监听,访问的端口var host = server.address().addressvar port = server.address().port  console.log('http://%s:%s',host,port);})

4.5)pages下的index.js内容如下所示:

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];//请求的路径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;//返回页面  }, 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文件的访问路径    phantom.exit();  }, 500);})

OK，以上就是全部接口的内容,全部的代码可以访问https://github.com/kim095/node-phantom进行下载.希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Nodejs中使用phantom将html转为pdf或图片格式的方法
• Node.JS利用PhantomJs抓取网页入门教程
• nodejs通过phantomjs实现下载网页
• 利用NodeJS和PhantomJS抓取网站页面信息以及网站截图