通化市网站建设_网站建设公司_前后端分离_seo优化

本文通过一个完整示例，演示如何使用Puppeteer自动访问后台系统、设置 Cookie、切换分页大小，并循环点击「下一页」抓取所有表格 HTML 数据。

一、应用场景说明

在实际项目中，我们经常遇到以下需求：

• 后台系统需要登录才能访问
• 数据列表有分页，需要自动翻页
• 希望批量抓取每一页的表格数据
• 页面基于 Element UI（el-pager、btn-next）

本文将一步步实现：

✅ 打开后台页面
✅ 使用 Cookie 模拟登录
✅ 切换为50 条/页
✅ 自动计算总页数
✅ 循环点击「下一页」
✅ 抓取所有表格 HTML

二、环境准备

1. 安装 Puppeteer

npminstallpuppeteer

2. Node.js 版本

建议使用：

• Node.js ≥ 14
• Puppeteer ≥ 19

三、完整示例代码

下面是完整可运行的示例代码：

constpuppeteer=require('puppeteer');constfs=require('fs');// 封装一个延时方法functionwaitForTimeout(time){returnnewPromise(resolve=>setTimeout(resolve,time));}(async()=>{constbrowser=awaitpuppeteer.launch({headless:false// 关闭无头模式，方便调试});try{constpage=awaitbrowser.newPage();awaitpage.setViewport({width:1920,height:800});// 1. 进入后台登录页面awaitpage.goto('http://localhost:8093/admin');// 2. 设置登录 Cookie（模拟已登录）constcookies=[{name:'Admin-Token',value:'你的 token',domain:'localhost',path:'/'}];// 如果需要启用 Cookie，取消注释// await page.setCookie(...cookies);// 3. 跳转到数据列表页awaitpage.goto('http://localhost:8093/category');// 4. 切换分页大小为 50 条/页constpageSizeXPath='//span[text()="50条/页"]';awaitpage.waitForXPath(pageSizeXPath);const[pageSizeBtn]=awaitpage.$x(pageSizeXPath);if(pageSizeBtn){awaitpageSizeBtn.evaluate(el=>el.click());console.log('已切换为 50 条/页');}// 5. 获取总页数awaitpage.waitForSelector('ul.el-pager');constliElements=awaitpage.$$('ul.el-pager li');constlastLi=liElements[liElements.length-1];lettotalPages=1;if(lastLi){totalPages=parseInt(awaitpage.evaluate(li=>li.textContent,lastLi));console.log('总页数:',totalPages);}// 6. 循环点击下一页并抓取表格consttableSelector='table';constnextBtnSelector='button.btn-next';awaitpage.waitForSelector(nextBtnSelector,{visible:true});letcurrentPage=1;letallTableHTML='';while(currentPage<=totalPages){console.log(`正在抓取第${currentPage}页`);// 抓取当前页表格consttables=awaitpage.$$(tableSelector);for(consttableoftables){consthtml=awaittable.evaluate(el=>el.outerHTML);allTableHTML+=html+'\n\n';}// 点击下一页constnextBtn=awaitpage.$(nextBtnSelector);if(!nextBtn)break;awaitnextBtn.click();awaitwaitForTimeout(3000);currentPage++;}console.log('分页抓取完成');// 7. 可选：保存为 HTML 文件fs.writeFileSync('tables.html',allTableHTML,'utf-8');console.log('表格 HTML 已保存到 tables.html');// await browser.close();}catch(e){console.error('发生错误：',e);}})();

四、关键代码讲解

1️⃣ 模拟登录（Cookie）

awaitpage.setCookie({name:'Admin-Token',value:'xxx',domain:'localhost',path:'/'});

适用于：

• 后台 token 登录
• 无需输入账号密码
• 常见于 Vue / Element UI 项目

2️⃣ XPath 精准点击「50条/页」

constxpath='//span[text()="50条/页"]';const[el]=awaitpage.$x(xpath);awaitel.evaluate(e=>e.click());

优点：

• 不依赖 class
• 文本唯一即可定位

3️⃣ 获取 Element UI 总页数

ul.el-pager li:last-child

Element UI 的分页结构非常规整，最后一个li就是最大页数。

4️⃣ 自动翻页核心逻辑

while(currentPage<=totalPages){awaitnextBtn.click();awaitwaitForTimeout(3000);}

建议：

• 使用显式等待
• 避免点击过快导致请求丢失