服务端实现对页面截图 - Headless Chrome

版权声明 :

本文为博主原创文章,如需转载,请注明出处(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 wait = new WebDriverWait(driver, 3);
      wait.until(new ExpectedCondition() {
        @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是目前比较好用的截图工具，代码量少，易上手，而且也没有什么明显的缺陷

         分享一篇我看到的博客借鉴博客

         服务端对页面截图到此结束~