使用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)
      })()
  
 

  
 
 

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

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/97500132