目录全网最实用的网页完整保存手册再也不怕点击才显示的内容消失了一、3 分钟快速上手最简单的解决方法二、搞懂原理为什么普通方法会失效传统网页 vs 现代网页的区别所有普通保存方法的致命缺陷三、四种解决方案从简单到复杂总有一款适合你方案一手动触发 SingleFile入门级方案二开发者工具批量点击进阶级方案三Puppeteer 自动化脚本推荐级准备工作完整脚本直接复制粘贴就能用如何使用这个脚本方案四专业归档工具企业级四、高级技巧搞定那些特别难搞的页面4.1 怎么保存需要登录的页面4.2 怎么保存无限滚动的页面4.3 怎么批量保存多个页面五、常见问题解答Q保存后的页面点击按钮没反应怎么办Q保存的页面样式错乱了图片显示不出来怎么办QPuppeteer 运行报错怎么办Q网站有反爬机制不让机器人访问怎么办六、工具对比与选型指南最后版本1.0 | 更新日期2026 年 5 月 | 适用所有现代网页手残党也能学会你有没有过这种崩溃时刻看到一篇超有用的技术文档想存下来离线看结果保存完打开所有折叠的章节全是空的公司系统里的报表点一下按钮才出图表用浏览器 另存为 只存了个空白表格网上的教程分了 10 个标签页一个个点太麻烦想一次性全存下来慢慢看好不容易找到的资料过两天再打开链接 404 了悔得拍大腿这不是你的问题是现代网页的 套路。现在 90% 以上的网站都在用 懒加载 和 按需加载—— 页面先给你看个空架子你点哪里它才从服务器给你拿哪里的内容。普通的保存方法根本抓不到这些 藏起来 的东西。今天这篇手册我把从入门到精通的所有方法都整理好了从 3 分钟搞定的傻瓜式操作到能自动帮你点遍所有按钮的机器人脚本保证你看完之后任何网页都能原封不动地保存下来。一、3 分钟快速上手最简单的解决方法谁适合用偶尔保存一次页面上需要点的按钮不超过 10 个难度★☆☆☆☆ | 效果★★★☆☆这是所有人都能学会的方法不需要写任何代码只需要一个浏览器扩展。步骤大白话操作1打开你要保存的那个网页等它最开始的内容加载完2手动把所有你想看的内容都点出来切换所有标签页、点开所有折叠的 展开更多、拉到底部看所有评论3安装 Chrome 扩展【SingleFile】直接在 Chrome 应用商店搜名字就行4点一下浏览器右上角的 SingleFile 图标它会自动开始打包5等个几秒钟它会自动下载一个单一的 HTML 文件搞定为什么这个方法比浏览器自带的 另存为 好 100 倍浏览器 另存为 只会把当前页面上已经显示的东西存下来而且会把 CSS、图片、JS 拆成好几个文件很容易弄丢。SingleFile 会把整个页面所有的东西 —— 文字、图片、样式、甚至字体 —— 全部打包成一个 HTML 文件你拷到任何电脑上打开都和原来的页面一模一样。二、搞懂原理为什么普通方法会失效在讲更高级的方法之前我用大白话给你讲清楚为什么你之前的保存方法都不管用。传统网页 vs 现代网页的区别传统网页10 年前的网站就像一本印刷好的书。你打开链接服务器直接把整本书的内容都发给你浏览器直接显示出来。所有内容都在 HTML 里用 另存为 就能完整保存。现代网页现在几乎所有网站就像一个空书架。你打开链接服务器只给你发一个空架子和一个 管理员JS 代码。你想看哪一章就告诉管理员管理员再跑去服务器把那一页拿过来给你看。这就是问题所在普通的保存方法只能拿到那个空书架拿不到管理员后来给你拿过来的那些书页。所有普通保存方法的致命缺陷方法能拿到什么拿不到什么浏览器 另存为空书架 已经放在架子上的几本书所有需要点一下才会拿过来的书wget/curl/ 普通爬虫只有空书架所有书包括已经放在架子上的其他乱七八糟的保存工具大部分已经显示的内容所有点击后才加载的内容核心结论要想完整保存现代网页你必须先模拟人的操作把所有你想要的内容都 点出来然后再保存。三、四种解决方案从简单到复杂总有一款适合你方案一手动触发 SingleFile入门级就是上面快速开始里讲的方法适合绝大多数普通用户。优点零门槛操作简单保存效果好缺点按钮多的时候手会酸容易漏点方案二开发者工具批量点击进阶级谁适合用页面上有几十个相同的按钮一个个点太麻烦难度★★☆☆☆ | 效果★★★★☆比如一个页面有 20 个折叠面板一个个点太费劲我们可以让浏览器自动帮我们点完所有按钮。详细步骤真的很简单别害怕打开目标网页按键盘上的F12 键这是打开浏览器的 后台控制台不会弄坏任何东西点击控制台左上角那个箭头图标就是用来选元素的用这个箭头点一下页面上任意一个你想批量点击的按钮这时候控制台里会高亮显示一行代码右键点击这行代码选择Copy → Copy selector复制选择器切换到控制台的Console标签就是最上面那一排里的 控制台把下面这段代码粘贴进去把你复制的内容换成你刚才复制的东西然后按回车// 自动点击所有同类按钮 document.querySelectorAll(你复制的内容).forEach(btn btn.click()); // 自动滚动到底部触发所有图片懒加载 window.scrollTo(0, document.body.scrollHeight); // 等3秒钟让所有内容加载完 setTimeout(() { console.log(所有内容都加载好了可以保存了); }, 3000);等控制台提示 所有内容都加载好了再用 SingleFile 保存页面我给你准备了几个常用的代码直接复制就能用// 展开所有折叠面板 document.querySelectorAll([data-togglecollapse]).forEach(el el.click()); // 切换所有标签页 document.querySelectorAll(.nav-tabs a).forEach(tab tab.click()); // 加载所有分页内容 document.querySelectorAll(.pagination a).forEach(page page.click());优点比纯手动快 10 倍几秒钟就能点完几十个按钮缺点需要复制粘贴几行代码不同页面需要换一下选择器方案三Puppeteer 自动化脚本推荐级谁适合用经常需要保存网页或者页面特别复杂难度★★★☆☆ | 效果★★★★★这是我最推荐的方法。Puppeteer 是谷歌官方出的一个工具你可以把它理解成一个听话的机器人浏览器。你告诉它要去哪个网页要点击哪些按钮要滚动到哪里它会自动帮你完成所有操作然后把完整的页面保存下来。准备工作先安装 Node.js直接去官网 https://nodejs.org/ 下载一路下一步就行新建一个文件夹名字随便起比如叫 网页保存工具在这个文件夹里按住 Shift 键右键点击空白处选择 在此处打开 PowerShell 窗口输入下面两行命令按回车执行npm init -y npm install puppeteer这两行命令会自动帮你安装好所有需要的东西。完整脚本直接复制粘贴就能用在刚才的文件夹里新建一个文本文档把下面的代码全部复制进去然后把文件名改成save-page.js注意要把后缀名从.txt 改成.js。const puppeteer require(puppeteer); const fs require(fs); // 这里是你需要修改的配置 const CONFIG { url: https://example.com, // 把这里换成你要保存的网页地址 output: 完整页面.html, // 保存后的文件名 headless: false, // true机器人后台运行false你能看到机器人在操作推荐用false方便调试 scrollDelay: 100, // 滚动速度数字越大越慢 waitAfterClick: 2000, // 点击按钮后等多久毫秒1秒1000毫秒 }; // async function saveCompletePage() { console.log(正在启动浏览器...); const browser await puppeteer.launch({ headless: CONFIG.headless, defaultViewport: null, args: [--start-maximized, --disable-web-security] }); const page await browser.newPage(); console.log(正在打开目标网页...); await page.goto(CONFIG.url, { waitUntil: networkidle2, // 等网页加载完没有新的请求了 timeout: 60000 }); console.log(网页初始加载完成); // 这里是机器人要执行的操作 // 1. 自动滚动到底部触发所有图片懒加载 await autoScroll(page); // 2. 自动点击所有标签页把.tab-button换成你页面上标签页的选择器 console.log(正在点击所有标签页...); await page.evaluate(() { document.querySelectorAll(.tab-button).forEach(btn btn.click()); }); await page.waitForTimeout(CONFIG.waitAfterClick); // 3. 自动展开所有折叠面板把.accordion-header换成你页面上折叠面板的选择器 console.log(正在展开所有折叠面板...); await page.evaluate(() { document.querySelectorAll(.accordion-header).forEach(header header.click()); }); await page.waitForTimeout(CONFIG.waitAfterClick); // 4. 如果有分页把下面这段的注释去掉自动加载所有分页 // console.log(正在加载所有分页...); // await page.evaluate(() { // document.querySelectorAll(.page-link).forEach(page page.click()); // }); // await page.waitForTimeout(CONFIG.waitAfterClick); // console.log(等待所有内容渲染完成...); await page.waitForTimeout(2000); console.log(正在保存页面...); const html await page.content(); fs.writeFileSync(CONFIG.output, html, utf8); console.log(✅ 保存成功文件已保存为${CONFIG.output}); await browser.close(); } // 自动滚动函数不用改 async function autoScroll(page) { console.log(正在自动滚动页面...); await page.evaluate(async (scrollDelay) { await new Promise((resolve) { let totalHeight 0; const distance 100; const timer setInterval(() { const scrollHeight document.body.scrollHeight; window.scrollBy(0, distance); totalHeight distance; if (totalHeight scrollHeight) { clearInterval(timer); resolve(); } }, scrollDelay); }); }, CONFIG.scrollDelay); } // 运行脚本 saveCompletePage().catch(err { console.error(❌ 保存失败:, err); process.exit(1); });如何使用这个脚本把脚本里CONFIG部分的url换成你要保存的网页地址按照方案二里教的方法找到你页面上标签页和折叠面板的选择器替换掉脚本里对应的部分在 PowerShell 窗口里输入node save-page.js按回车这时候你会看到一个浏览器窗口自动打开然后自动滚动、自动点击所有按钮最后自动保存成一个 HTML 文件优点完全自动化一次写好脚本以后只要改个网址就能用能处理任何复杂的页面缺点需要一点点学习成本但学会了之后一劳永逸方案四专业归档工具企业级谁适合用需要保存大量网页或者需要长期管理归档内容难度★★★★☆ | 效果★★★★★如果你是做研究的或者公司需要长期归档网页推荐使用ArchiveBox。这是一个开源的自托管网页归档工具功能比 SingleFile 强大得多。它能做到自动执行 JS触发所有懒加载和点击事件同时保存为 HTML、PDF、截图、WARC 等多种格式自动下载页面里的视频和音频支持批量导入 URL 列表一次性保存几百个网页有一个网页界面可以搜索和管理所有归档的内容最简单的安装方法用 Dockerdocker run -v $PWD/archive:/data -p 8000:8000 archivebox/archivebox安装完成后打开浏览器访问http://localhost:8000就能开始使用了。优点功能最强大适合批量保存和长期管理缺点安装和配置相对复杂适合有一定技术基础的用户四、高级技巧搞定那些特别难搞的页面4.1 怎么保存需要登录的页面很多有用的内容都需要登录才能看普通方法保存下来的都是登录页面。最简单的方法用 SingleFile。只要你在浏览器里已经登录了SingleFile 会自动带上你的登录信息保存下来的就是登录后的内容。用 Puppeteer 的方法让机器人先登录一次然后把 登录凭证Cookie保存下来以后就不用再登录了。// 第一次运行手动登录然后保存Cookie await page.goto(https://example.com/login); console.log(请在打开的浏览器窗口中手动登录...); await page.waitForNavigation({ waitUntil: networkidle2 }); const cookies await page.cookies(); fs.writeFileSync(cookies.json, JSON.stringify(cookies)); console.log(登录信息已保存下次运行会自动登录); // 以后运行直接加载Cookie const cookies JSON.parse(fs.readFileSync(cookies.json)); await page.setCookie(...cookies);4.2 怎么保存无限滚动的页面比如微博、知乎、小红书这种一直往下滑一直有新内容的页面。用方案三里的autoScroll函数就行它会自动一直滚动到底部直到没有新内容加载出来。如果页面特别长可以把scrollDelay调大一点给内容足够的加载时间。4.3 怎么批量保存多个页面修改一下 Puppeteer 脚本加一个 URL 列表循环就行// 把你要保存的所有网页地址放在这里 const URLS [ https://example.com/page1, https://example.com/page2, https://example.com/page3 ]; async function batchSave() { for (let i 0; i URLS.length; i) { console.log(正在保存第 ${i1}/${URLS.length} 个页面: ${URLS[i]}); await saveCompletePage(URLS[i], 页面${i1}.html); } console.log(✅ 所有页面都保存完成了); } batchSave();五、常见问题解答Q保存后的页面点击按钮没反应怎么办A这是正常的。我们保存的是静态的 HTML 文件就像给页面拍了一张 超级高清的照片能看到所有内容但不能再交互了。如果你需要保留交互功能可以用 ArchiveBox 保存为 WARC 格式。Q保存的页面样式错乱了图片显示不出来怎么办A99% 的情况是因为你用了浏览器自带的 另存为。换成 SingleFile 或者 Puppeteer 脚本就不会有这个问题了。QPuppeteer 运行报错怎么办A最常见的原因是浏览器版本不兼容。执行下面的命令重新安装 puppeteer 就行npm uninstall puppeteer npm install puppeteerQ网站有反爬机制不让机器人访问怎么办A把脚本里的headless设为false这样机器人就会用正常的浏览器窗口访问大部分反爬机制都检测不出来。六、工具对比与选型指南方案操作难度保存效果自动化程度适合人群手动触发 SingleFile★☆☆☆☆★★★☆☆低普通用户偶尔用一次开发者工具批量点击★★☆☆☆★★★★☆中有基础电脑知识的用户Puppeteer 自动化脚本★★★☆☆★★★★★高经常需要保存网页的用户ArchiveBox 专业工具★★★★☆★★★★★极高企业用户需要长期归档一句话选型建议偶尔用一次选方案一按钮多懒得点选方案二经常要用选方案三公司用或者要存很多选方案四最后现代网页的动态加载技术确实给我们保存内容带来了很多麻烦但只要掌握了正确的方法就没有保存不了的网页。希望这篇手册能帮你解决网页保存的难题。如果你有某个特定的网站怎么都保存不了或者需要更复杂的功能可以在评论区告诉我我帮你写个定制化的脚本。