链接中的资源是我自己做的完整的项目代码,都是正常测试过的,需要的工具就是无界浏览器phantomjs,资源我也上传了,链接:https://download.csdn.net/download/weixin_42209881/10905918
解压到本地某个目录
如果下载我的资源包的话,里边目录第一层有项目中使用的js截图脚本
这是一个测试的js脚本,供参考:
var page = require('webpage').create();
var address = 'https://echarts.baidu.com/echarts2/doc/example/gauge1.html'; //填写需要打开的地址路径
var output = './test.png'; //截图文件路径和名称
page.viewportSize = {
width: 1280,
height: 800
};
//设置长宽
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
length = page.evaluate(function () {
var div = document.getElementById('main'); //要截图的div的id
var bc = div.getBoundingClientRect();
var topX = bc.top; //避免使用关键字
var left = bc.left;
var width = bc.width;
var height = bc.height;
window.scrollTo(0, 10000); //设置滚轮滚动到底部
return [topX, left, width, height];
});
console.log(length);
page.clipRect = { //截图的偏移和宽高
top: length[0],
left: length[1],
width: length[2],
height: length[3]
};
}, 6000); //设置延时时间,保证页面完全加载
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 6000);
}
});
使用cmd命令调用,传入phantomjs.exe保存的路径和js脚本文件的路径即可
也可在后边传参,参数加在js文件路径后边,空格隔开就行,然后需要在js文件中做如下处理,我只写参数处理部分,后边的都一样。
例:如果传两个参数,就这样取,注意下标是从1开始
var page = require('webpage').create(),
system = require('system');
var address = 'http://localhost:8888/index.html';
//var address = 'file:///E://js//test.html';
//填写需要打印的HTML文件
var output = system.args[1]; //存储文件路径和名称
var divID = system.args[2]; //截图的divID
console.log(output);
调用例子中的js生成的截图: