本篇文章給大家分享的是有關(guān)使用Puppeteer 怎么爬取動態(tài)生成的網(wǎng)頁，小編覺得挺實用的，因此分享給大家學(xué)習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達十年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的推廣解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都柔性防護網(wǎng)等企業(yè)，備受客戶贊美。

1. 需求

首先，了解下我們的需求: 爬取zoomcharts 文檔中 Net Chart 目錄下所有訪問連接對應(yīng)的頁面，并保存到本地

2. 研究 ZoomCharts 文檔頁面結(jié)構(gòu)

首先，我們得研究透 ZoomCharts 頁面如何加載，以及左側(cè)導(dǎo)航的 DOM 樹結(jié)構(gòu)，才好進行下一步操作

頁面首次加載

頁面首次加載，左側(cè)導(dǎo)航第一個目錄 Introduction 高亮，從控制臺可看出，該元素增加了 active 類，同時 li[data-section="net-chart"] 節(jié)點下只有一個元素節(jié)點 a

點擊 Net Chart 目錄

點擊 Net Chart 目錄, Net Chart 目錄高亮，下拉顯示子目錄，查看控制臺，其元素節(jié)點增加 active 類，并增加 ul 子元素節(jié)點, 此時，第一個子目錄節(jié)點也只有一個子元素節(jié)點 a

結(jié)論

不難發(fā)現(xiàn), 左側(cè)目錄是動態(tài)生成的，而不是靜態(tài)寫死的，只有點擊父級目錄，其子目錄才會生成顯示，同時，父級目錄元素上的 drop 類表明存在子級目錄

3. 編寫主程序

通過上面分析，得出大概流程如下

• 從上到下，遍歷 Net Chart 目錄的 DOM 樹，當找到 a.drop 的元素節(jié)點，模擬鼠標點擊事件 click ，生成子目錄節(jié)點

• 找到 Net Chart 目錄下所有的 a 鏈接，生成一個數(shù)組

• 遍歷數(shù)組，訪問每一個子目錄頁面，保存頁面的 html 文件到本地

接下來實現(xiàn)每個具體流程

項目初始化

安裝 puppeteer , rimraf (文件夾操作時需用到)

npm i -S puppeteer rimraf

新建 test.js 文件并引入

const puppeteer = require('puppeteer');
const chalk = require('chalk');
const path = require('path');
const https = require('https');
const fs = require('fs');
const rm = require('rimraf');

const settings = {
 headless: false
}

function resolve(dir, dir2 = '') {
	return path.posix.join(__dirname, './', dir, dir2);
}

async function main () {
 const browser = await puppeteer.launch(settings); // 創(chuàng)建一個Browser 對象
 try {
  const page = await browser.newPage(); // 使用 Browser 創(chuàng)建 Page 
  page.setDefaultNavigationTimeout(600000);
  // 監(jiān)聽 console 
  page.on('console', msg => {
   for (let i = 0; i < msg.args().length; ++i) {
    console.log(`${i}: ${msg.args()[i]}`);
   }
  });
  
  <!-- main start -->
  // main 區(qū)域
  
  <!-- end start-->
  console.log('服務(wù)正常結(jié)束')
 } catch (error) {
  console.log('服務(wù)出現(xiàn)錯誤：')
  console.log(error)
 } finally {
  
 }
}

main()

接下來所有代碼都在 main 區(qū)域內(nèi)完成， 完整代碼可訪問github代碼倉庫 查看，下面僅列出每部分的思路

創(chuàng)建文件夾，用于保存爬取的文件

• 定義文件輸出路徑

• 根據(jù)路徑生成文件夾

• 當文件夾已經(jīng)存在，先刪除，再新建

實現(xiàn) Net Chart 目錄下所有 a.drop 元素的點擊事件

這部分涉及到DOM 操作, 只有在 page.evaluate() 中才能訪問真實的 DOM 元素，同時，在 page.evaluate() 中不能直接調(diào)用外面定義的函數(shù)，可將函數(shù)傳遞進去，或?qū)⒑瘮?shù)綁定到 window 對象上

await page.evaluate(async () => {
 const rootNode = document.querySelector('#menu > ul > li:nth-child(5) > ul > li:nth-child(5)');
 await window.walkDOM(rootNode)
})

此時，綁定到 window 對象上的 walkDOM 函數(shù)需要在 page.evaluateOnNewDocument 函數(shù)中定義才能生效

await page.evaluateOnNewDocument(() => {
 // 遍歷DOM
 window.walkDOM = (node) => {
  if (node === null) {
   return
  }
  if (node.tagName === 'A' && node.className.indexOf('drop') > -1) {
   node.click() // 點擊事件
  }
  node = node.firstElementChild
  while (node) {
   walkDOM(node)
   node = node.nextElementSibling
  }
 }
})

當Net Chart 目錄下所有 a.drop 元素點擊過后， Net Chart 目錄下所有后代子目錄都會加載生成，接下來操作就簡單了

獲取Net Chart 目錄下所有 a 元素

• 通過 document.querySelectorAll() 查找到所有 a 元素，保存到數(shù)組

• 遍歷數(shù)組，對數(shù)組每一項進行處理成 {href: '',text: ''} 對象

• 返回對象數(shù)組

遍歷對象數(shù)組， 訪問每一個鏈接，下載其HTML文件

• 跳轉(zhuǎn)每一個鏈接，下載需要的html到指定文件夾

• 當 HTML 中存在 img 時，下載所有圖片

以上就是使用Puppeteer 怎么爬取動態(tài)生成的網(wǎng)頁，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：使用Puppeteer怎么爬取動態(tài)生成的網(wǎng)頁
新聞來源：http://www.2m8n56k.cn/article10/poocdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網(wǎng)站設(shè)計、軟件開發(fā)、、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)