phantomjs对页面的某个div截图

  • Post author:
  • Post category:其他


昨天写了一篇《对网页进行截图》,今天在家想了想,在项目中,我们为了导出hightcharts做的图在报告中用,我们更好的方式是对某个div进行截图,所以趁着周天,边查资料边改造,把昨天的那个项目改成了截取某个div的截图,到此刻,搞完了。记录一下,以备不时之需。

相比于昨天的我们需要给批处理文件多传一个参数也就是那个div的id,对我对那个js修改为如下:

system = require(‘system’)

address = system.args[1]; //获取传递进来的参数1

var path=ids+”.png”;

var page = require(‘webpage’).create(),ids;

ids= system.args[2];

var width = 1349;

var height = 1883;

page.viewportSize = {width: width, height: height};

page.open(address, function () {




console.log(“ids2—“+ids);

var length= page.evaluate(function (s) {

var div = document.getElementById(s); //要截图的div的id

var bc = div.getBoundingClientRect();

var top = bc.top;

var left = bc.left;

var width = bc.width;

var height = bc.height;

window.scrollTo(0, 10000);//滚动到底部

return [top, left, width, height];

},ids);  // page.evaluate(fn, [param]) 那个param就可以把外面的参数传进去了

console.log(length);

page.clipRect = { //截图的偏移和宽高

top: length[0],

left: length[1],

width: length[2],

height: length[3]

};



page.render(ids+”.png”);

phantom.exit();

});

然后对批处理文件的执行phantomjs多加一个参数,如下:

d:

phantomjs.exe dome1.js %1 %2

exit

这样就搞定了,开始在Java中执行。如下:

Runtime.getRuntime().exec("cmd /c start D:/dome1.bat http://127.0.0.1:8020/ha/index.html containerType5");

就这样截图成功。再也不用担心图表后台程序导出了。



版权声明:本文为lilovfly原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。