Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn)

Puppeteer 相關(guān)介紹與安裝不過多介紹，可通過以下鏈接進行學(xué)習(xí)

一、Puppeteer

開源地址

英文文檔

中文社區(qū)

二、爬取動態(tài)網(wǎng)頁

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. 編寫主程序

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

接下來實現(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)建文件夾，用于保存爬取的文件

實現(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
 }
 }
})

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

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

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

4. 總結(jié)

第一次使用Puppeteer也是磕磕絆絆，花費不少時間，期間也參考了不少文章，還需多多練習(xí)

代碼倉庫

代碼倉庫

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com