利用Phantomjs和Node进行网页截图的方法

由于甲方父亲的需要，最近用phantomjs和Node编写了一个抓取网页内容的功能。为了避免遗忘，现在大致描述一下代码内容和配置流程。

1.首先必须要安装Node，网上有很多安装教程，这里就不赘述了。Nodejs官方网站链接

2.然后，第二个主角是phantomjs，官网下载地址，并选择相应的系统下载相应的安装包

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

配置完成后，在cmd命令行中输入phantomjs -v以验证配置是否成功。配置成功后，如下图所示为：

4.“代码”，查阅了phantomjs的入口代码后，我们知道使用phantomjs可以预览一个网页生成图片、PDF、base64格式等。但是我们的项目需要的不是一个完整的网页，而是网页中的一部分内容，所以在这个基础上，我们要对部门内容进行改造。现在解释代码：

4.1)首先是快递的一些设置。由于需要执行phantomjs的命令，因此需要引入child_process模块。具体代码如下：

var process=require(' child _ process ')；//var express=执行命令行所需的require(' express ')；//express var body parser=require(' body-parser ')；var fs=require(' fs ')；//文件操作var app=express()；app.use('/pages '，express . static(' pdf ')；//设置静态资源目录app . use(body parser . JSON({ limit : ' 50m b ' })；//请求内容大小限制app . use(body parser . URL encoded({ limit : ' 50m b '，extended : false })；//设置varallowcrossdomain=function(req，RES，next){ RES . header(' access-control-allow-origin '，' * ')；res.header('访问控制-允许-方法'，'获取，放置，发布，删除')；res.header('访问控制-允许-头'，'内容类型')；res.header('访问控制-允许-凭证'，' true ')；next()；};app . use(allowCrossDomain)；4.2)然后是页面base64接口的生成方法，如下：

app.get('/getBase64 '，函数(req，RES){ var URL=req . query . URL；//读取请求中的url参数，然后访问此url url=url.replace(//g，' & ')；//transform varresp={ ' status ' : ' 200 ' } RES . write head(200，{ ' content-type ' : ' text/html；charset=utf-8 ' })；//如果(url==''){ resp.msg='url参数不能为空'，则设置响应头；RES . end(JSON . stringify(resp))；} else {//由phantom js执行的命令行index.js稍后给出var str shell=' phantom js-disk-cache=true-disk-cache-path=. index . js ' URL；process.exec(strShell，{ maxBuffer:5000*1024，})，function(error，stdout，strerr){ if(error！==null){ console.log(错误)；Resp.msg=“转换失败，请稍后再试”；RES . end(JSON . stringify(resp))；}else{ //成功执行后返回base64的data resp.data=stdoutRES . end(JSON . stringify(resp))；} })})4.3)Phantom JS执行的脚本，即index.js，如下：

var page=require('网页')。create()；//get web pagevar system=require(' system ')，address如果(system.args.length===1) {//执行的命令应该包含请求的URL，否则，退出phantom console.log('用法： URL错误')；phantom . exit()；}地址=system . args[1]；//请求的地址地址=address . replace(/&/g ' ')；//phantom无法识别&，所以转到page.viewportSize={//设置viewportwidth : 1920，height : 1080，} page.open (address，Function(status) {//打开page setTimeout(function() {//2s)后得到base64结果。如果是直接生成的，有可能页面还没有加载。if(status==' success '){ varbase64=page。render base64(' png ')；console . log(base64)；//输出base64结果后，在上面的getBase64界面得到phantom . exit()；} }, 2000);})4.4)获取页面中部分内容的截图。您可以将DOM字符串发送到后台，然后创建一个新的空白页，使用phantom访问空白页，将DOM字符串添加到预览页，然后生成截图。具体代码如下：

app.post('/getPartPage '，function(req，RES){ var xmlObj=req。尸体。xmlObj//获取数字正射影像图字符串常量请求网址='http:example.com/tmp.html'；//要访问的空页面定义变量响应={ 'status': '200 '，}；if (xmlObj==未定义| | XMlobj==' ' | | XMlobj==null){响应。msg=' DOM字符串内容未输入；res.end(JSON.stringify(响应));}else { fs.writeFile('tmp.txt '，xmlObj，function(err) { //由于数字正射影像图字符串内容过多，所以写入文本文件(文本文件)文本if (err) { response.msg='生成页面失败，请稍后重试；返回RES . end(JSON。stringify(响应))；} var strShell=' phantom js pages/index。请求网址；//phantomjs执行的命令process.exec(strShell，{ maxBuffer: 5000 * 1024，})，function(error，stdout，strerr) { if (error！==null) { response.msg='脚本执行错误，请稍后重试；res.end(JSON.stringify(响应));} else { response。data=stdout。替换(' \ r \ n '，' ')；res.end(JSON.stringify(响应));//返回结果} })})var server=app。监听(8808，function(){ //接口监听，访问的端口var host=server.address().addressvar port=server.address().端口控制台。日志(' http://% s 3360% s '，主机，端口);})4.5)页下的index.js内容如下所示：

var page=require('网页')。create()；//获取web page var fs=require(' fs ')；var系统=必需('系统')，地址、文件名；if(系统。啊。长度===1){控制台。日志('用法：网址错误');幻影。exit()；}地址=系统。args[1]；//请求的路径地址=地址。替换(/&/g ' ')；文件名=(新数据())。getTime()；page.viewportSize={ width:750 }，page.paperSize={ //生成A4号号大小的便携文档格式文件格式： 'A4 '，方向： '纵向，margin: ' 0.8cm ' }页面打开(地址，函数（状态){ var info=fs。read(' tmp。txt’)；//读取数字正射影像图字符串var结果=页面。评估(函数(信息){尝试{文档。queryselector(' # DOM ').innerHTML=info//将数字正射影像图字符串拼接} catch(e){ console。日志(e)；}返回document.querySelector('#dom ').innerHTML//返回页面},信息);setTimeout(函数(){ page。纸张尺寸={格式： ' A4 '，方向： '纵向，边距： ' 0.8cm ' }；page.viewportSize={ width:750 }；//生成便携文档格式文件page.render('pages/' filename ' .pdf '，{ format: 'pdf '，quality : ' 100 ' })；控制台。日志(' http://示例。com/page/' filename ').pdf ')；//返回便携文档格式文件的访问路径幻影。exit()；}, 500);})好的，以上就是全部接口的内容，全部的代码可以访问https://github.com/kim095/node-phantom进行下载。希望对大家的学习有所帮助，也希望大家多多支持我们。