使用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