版权声明 :
本文为博主原创文章,如需转载,请注明出处(https://blog.csdn.net/F1004145107/article/details/99860121)
-
/ 1 / 前言
这篇文章其实是和服务端实现对页面截图 - PhantomJs一起写完的,但是最近才整理发布出来,是为了解决
PhantomJs
无法对动态页面进行截图,加入我有一个有数据报表的页面,报表的展示需要动态的去请求接口获取数据,此时PhantomJs
就无法完成了,所以后来我发现了Chrome - Headless
,Headless是Chrome浏览器的一个模式,它提供了一些功能,例如截屏,有兴趣的同学可以研究一下官方文档Chrome - Headless官方文档在使用
Headless
之前我们需要俩个东西,一个是Chrome浏览器和ChromeDriver驱动驱动下载地址,俩个保持同一版本即可,如果ChromeDriver没有你当前Chrome版本那么使用相近的版本亦可 -
/ 2 / 使用方式
使用方式非常简单,我们直接看代码
public static void screenshot(String screenshotUrl,String driverPath) { //设置驱动地址 System.setProperty("webdriver.chrome.driver", driverPath); ChromeOptions options = new ChromeOptions(); //这里是要执行的命令,如需修改截图页面的尺寸,修改--window-size的参数即可 options.addArguments("--headless", "--disable-gpu", "--window-size=1920,1200", "--ignore-certificate-errors"); WebDriver driver = new ChromeDriver(options); //访问页面 driver.get(screenshotUrl); //页面等待渲染时长,如果你的页面需要动态渲染数据的话一定要留出页面渲染的时间,单位默认是秒 Wait<WebDriver> wait = new WebDriverWait(driver, 3); wait.until(new ExpectedCondition<WebElement>() { @Override public WebElement apply(WebDriver d) { //这里的意思是等待id为canvas_6的标签被加载后才开始截图 return d.findElement(By.id("canvas_6")); } }).click(); //获取到截图的文件 File screenshotFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); if ((screenshotFile != null) && screenshotFile.exists()) { //TODO 文件上传/业务处理 } }
上面关键的地方我都已经在注释中标明了,只需要修改驱动的地址和截图地址即可,无需前端参与
-
/ 3 / 结语
目前来看
Chrome Headless
是目前比较好用的截图工具,代码量少,易上手,而且也没有什么明显的缺陷分享一篇我看到的博客借鉴博客
服务端对页面截图到此结束~