<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:03:48
        文檔

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

        Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn):Puppeteer 相關介紹與安裝不過多介紹,可通過以下鏈接進行學習 一、Puppeteer 開源地址 英文文檔 中文社區(qū) 二、爬取動態(tài)網(wǎng)頁 1. 需求 首先,了解下我們的需求: 爬取zoomcharts 文檔中 Net Chart 目錄下所有訪問連接對應的頁面,并保存到本地 2. 研究
        推薦度:
        導讀Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn):Puppeteer 相關介紹與安裝不過多介紹,可通過以下鏈接進行學習 一、Puppeteer 開源地址 英文文檔 中文社區(qū) 二、爬取動態(tài)網(wǎng)頁 1. 需求 首先,了解下我們的需求: 爬取zoomcharts 文檔中 Net Chart 目錄下所有訪問連接對應的頁面,并保存到本地 2. 研究

        Puppeteer 相關介紹與安裝不過多介紹,可通過以下鏈接進行學習

        一、Puppeteer

        開源地址

        英文文檔

        中文社區(qū)

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

        1. 需求

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

        2. 研究 ZoomCharts 文檔頁面結構

        首先,我們得研究透 ZoomCharts 頁面如何加載,以及左側(cè)導航的 DOM 樹結構,才好進行下一步操作

        頁面首次加載

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

        點擊 Net Chart 目錄

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

        結論

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

        3. 編寫主程序

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

      1. 從上到下,遍歷 Net Chart 目錄的 DOM 樹,當找到 a.drop 的元素節(jié)點,模擬鼠標點擊事件 click ,生成子目錄節(jié)點
      2. 找到 Net Chart 目錄下所有的 a 鏈接,生成一個數(shù)組
      3. 遍歷數(shù)組,訪問每一個子目錄頁面,保存頁面的 html 文件到本地
      4. 接下來實現(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('服務正常結束')
         } catch (error) {
         console.log('服務出現(xiàn)錯誤:')
         console.log(error)
         } finally {
         
         }
        }
        
        main()

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

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

      5. 定義文件輸出路徑
      6. 根據(jù)路徑生成文件夾
      7. 當文件夾已經(jīng)存在,先刪除,再新建
      8. 實現(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 元素

      9. 通過 document.querySelectorAll() 查找到所有 a 元素,保存到數(shù)組
      10. 遍歷數(shù)組,對數(shù)組每一項進行處理成 {href: '',text: ''} 對象
      11. 返回對象數(shù)組
      12. 遍歷對象數(shù)組, 訪問每一個鏈接,下載其HTML文件

      13. 跳轉(zhuǎn)每一個鏈接,下載需要的html到指定文件夾
      14. 當 HTML 中存在 img 時,下載所有圖片
      15. 4. 總結

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

        代碼倉庫

        代碼倉庫

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

        文檔

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

        Puppeteer 爬取動態(tài)生成的網(wǎng)頁實戰(zhàn):Puppeteer 相關介紹與安裝不過多介紹,可通過以下鏈接進行學習 一、Puppeteer 開源地址 英文文檔 中文社區(qū) 二、爬取動態(tài)網(wǎng)頁 1. 需求 首先,了解下我們的需求: 爬取zoomcharts 文檔中 Net Chart 目錄下所有訪問連接對應的頁面,并保存到本地 2. 研究
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产精品免费视频观看拍拍| 亚洲A∨精品一区二区三区下载| 人成午夜免费大片在线观看| 免费网站看v片在线香蕉| 国产AV旡码专区亚洲AV苍井空| 69式互添免费视频| 亚洲AV一二三区成人影片| 免费看国产成年无码AV片| 亚洲综合偷自成人网第页色| AV免费网址在线观看| 亚洲男人的天堂网站| 四虎影永久在线高清免费| 欧洲乱码伦视频免费国产| 亚洲精品第一国产综合境外资源| 乱爱性全过程免费视频| 亚洲美女又黄又爽在线观看| 青青草原1769久久免费播放| 亚洲日产2021三区在线| 男女交性永久免费视频播放 | 亚洲成人一级电影| 五月婷婷综合免费| 亚洲国产综合AV在线观看| 又大又黄又粗又爽的免费视频 | 国产亚洲精久久久久久无码77777| 国产精品偷伦视频免费观看了| 久久九九亚洲精品| 国产一卡二卡四卡免费| 亚洲av无码专区在线观看下载| 亚洲午夜激情视频| 色片在线免费观看| 免费一级毛suv好看的国产网站| 亚洲成a人片在线观看无码专区| 欧美三级在线电影免费| 中美日韩在线网免费毛片视频| 亚洲av女电影网| 永久免费av无码网站大全| 国产一精品一AV一免费| 在线aⅴ亚洲中文字幕| 亚洲无线码在线一区观看| 国产精品美女午夜爽爽爽免费 | 久久国产免费一区|