使用Nodejs+puppeteer 批量保存网页为图片或PDF

学习Three.js的时候,看到官方提供了很多很多的example,实在太多了,但并不是每个我都感兴趣,想去了解,但我又记不住每个链接对对应的效果是什么样的,于是我想,能不能把所有的案例用图片保存下来,用图片来对异性每一个example不是更直接明了吗? 于是我准备写一个工具,这个工具可以批量将网页保存成图片或PDF并且生成对应的图片案例页面,或json数据

说干就干

因为对nodejs比较数据,于是就选择用nodejs+puppeteer来实现这个小工具.当然python也是可以的.

首先是获取所有的example链接

在控制台输入下面这段代码就会获取所有example的链接json数组

代码如下:

 let linkArr = [...document.querySelector('#content').querySelectorAll('a')].map(x => {
    return {
      href:x.href,
      name:x.innerText.replace(/\//g, '_',)
    }
  })
  console.log(linkArr)

 

效果如图:

 

主程序代码如下

使用async await 递归example的链接数组 进行截图,保存.

 

const puppeteer = require('puppeteer');


(async () => {
  const link = {
    linkArr: [
    {nam:'animation_cloth', href :'http://172.16.7.199:8000/examples/webgl_animation_cloth.html'},
    {name:'animation_keyframes',href:'http://172.16.7.199:8000/examples/webgl_animation_keyframes.html'}]
  }
  const browser = await puppeteer.launch({
    executablePath:'./chrome-win/chrome.exe',
    // headless:false,
    defaultViewport :{width:1920,height:1080}});

  const linkArr = link.linkArr
  let i = 0
  async function forGet() {
    let  x = linkArr[i]
    const page = await browser.newPage();
    await page.goto(x.href);
    await setTimeout(x => {}, 5000)
    await page.screenshot({path: x.name+'.jpg'});
    i++
    if (i < linkArr.length) {
      forGet()
    } else {
      await browser.close();
    }
  }

  forGet()

  // let linkArr = [...document.querySelector('#content').querySelectorAll('a')].map(x => {
  //   return {
  //     href:x.href,
  //     name:x.innerText.replace(/\//g, '_',)
  //   }
  // })
  // console.log(linkArr)


})()

当然这个程序有很多大的性能提升空间,比如并发请求链接,而不是同步. 再比如多线程.都是不错的方案