全网最实用的网页完整保存手册：再也不怕点击才显示的内容消失了

目录

全网最实用的网页完整保存手册：再也不怕点击才显示的内容消失了

一、3 分钟快速上手：最简单的解决方法

二、搞懂原理：为什么普通方法会失效

传统网页 vs 现代网页的区别

所有普通保存方法的致命缺陷

三、四种解决方案：从简单到复杂，总有一款适合你

方案一：手动触发 + SingleFile（入门级）

方案二：开发者工具批量点击（进阶级）

方案三：Puppeteer 自动化脚本（推荐级）

准备工作

完整脚本（直接复制粘贴就能用）

如何使用这个脚本

方案四：专业归档工具（企业级）

四、高级技巧：搞定那些特别难搞的页面

4.1 怎么保存需要登录的页面？

4.2 怎么保存无限滚动的页面？

4.3 怎么批量保存多个页面？

五、常见问题解答

Q：保存后的页面点击按钮没反应怎么办？

Q：保存的页面样式错乱了，图片显示不出来怎么办？

Q：Puppeteer 运行报错怎么办？

Q：网站有反爬机制，不让机器人访问怎么办？

六、工具对比与选型指南

最后

版本：1.0 | 更新日期：2026 年 5 月 | 适用所有现代网页，手残党也能学会

你有没有过这种崩溃时刻？

• 看到一篇超有用的技术文档，想存下来离线看，结果保存完打开，所有折叠的章节全是空的
• 公司系统里的报表，点一下按钮才出图表，用浏览器 "另存为" 只存了个空白表格
• 网上的教程分了 10 个标签页，一个个点太麻烦，想一次性全存下来慢慢看
• 好不容易找到的资料，过两天再打开，链接 404 了，悔得拍大腿

这不是你的问题，是现代网页的 "套路"。现在 90% 以上的网站都在用 "懒加载" 和 "按需加载"—— 页面先给你看个空架子，你点哪里，它才从服务器给你拿哪里的内容。普通的保存方法根本抓不到这些 "藏起来" 的东西。

今天这篇手册，我把从入门到精通的所有方法都整理好了，从 3 分钟搞定的傻瓜式操作，到能自动帮你点遍所有按钮的机器人脚本，保证你看完之后，任何网页都能原封不动地保存下来。

一、3 分钟快速上手：最简单的解决方法

谁适合用：偶尔保存一次，页面上需要点的按钮不超过 10 个难度：★☆☆☆☆ | 效果：★★★☆☆

这是所有人都能学会的方法，不需要写任何代码，只需要一个浏览器扩展。

为什么这个方法比浏览器自带的 "另存为" 好 100 倍？浏览器 "另存为" 只会把当前页面上已经显示的东西存下来，而且会把 CSS、图片、JS 拆成好几个文件，很容易弄丢。SingleFile 会把整个页面所有的东西 —— 文字、图片、样式、甚至字体 —— 全部打包成一个 HTML 文件，你拷到任何电脑上打开，都和原来的页面一模一样。

二、搞懂原理：为什么普通方法会失效

在讲更高级的方法之前，我用大白话给你讲清楚，为什么你之前的保存方法都不管用。

传统网页 vs 现代网页的区别

• 传统网页（10 年前的网站）：就像一本印刷好的书。你打开链接，服务器直接把整本书的内容都发给你，浏览器直接显示出来。所有内容都在 HTML 里，用 "另存为" 就能完整保存。
• 现代网页（现在几乎所有网站）：就像一个空书架。你打开链接，服务器只给你发一个空架子和一个 "管理员"（JS 代码）。你想看哪一章，就告诉管理员，管理员再跑去服务器把那一页拿过来给你看。

这就是问题所在：普通的保存方法只能拿到那个空书架，拿不到管理员后来给你拿过来的那些书页。

所有普通保存方法的致命缺陷

核心结论：要想完整保存现代网页，你必须先模拟人的操作，把所有你想要的内容都 "点出来"，然后再保存。

三、四种解决方案：从简单到复杂，总有一款适合你

方案一：手动触发 + SingleFile（入门级）

就是上面快速开始里讲的方法，适合绝大多数普通用户。

优点：零门槛，操作简单，保存效果好缺点：按钮多的时候手会酸，容易漏点

方案二：开发者工具批量点击（进阶级）

谁适合用：页面上有几十个相同的按钮，一个个点太麻烦难度：★★☆☆☆ | 效果：★★★★☆

比如一个页面有 20 个折叠面板，一个个点太费劲，我们可以让浏览器自动帮我们点完所有按钮。

详细步骤（真的很简单，别害怕）：

1. 打开目标网页，按键盘上的F12 键（这是打开浏览器的 "后台控制台"，不会弄坏任何东西）
2. 点击控制台左上角那个箭头图标（就是用来选元素的）
3. 用这个箭头点一下页面上任意一个你想批量点击的按钮
4. 这时候控制台里会高亮显示一行代码，右键点击这行代码，选择Copy → Copy selector（复制选择器）
5. 切换到控制台的Console标签（就是最上面那一排里的 "控制台"）
6. 把下面这段代码粘贴进去，把'你复制的内容'换成你刚才复制的东西，然后按回车

// 自动点击所有同类按钮 document.querySelectorAll('你复制的内容').forEach(btn => btn.click()); // 自动滚动到底部，触发所有图片懒加载 window.scrollTo(0, document.body.scrollHeight); // 等3秒钟让所有内容加载完 setTimeout(() => { console.log('所有内容都加载好了，可以保存了！'); }, 3000);

1. 等控制台提示 "所有内容都加载好了"，再用 SingleFile 保存页面

我给你准备了几个常用的代码，直接复制就能用：

// 展开所有折叠面板 document.querySelectorAll('[data-toggle="collapse"]').forEach(el => el.click()); // 切换所有标签页 document.querySelectorAll('.nav-tabs a').forEach(tab => tab.click()); // 加载所有分页内容 document.querySelectorAll('.pagination a').forEach(page => page.click());

优点：比纯手动快 10 倍，几秒钟就能点完几十个按钮缺点：需要复制粘贴几行代码，不同页面需要换一下选择器

方案三：Puppeteer 自动化脚本（推荐级）

谁适合用：经常需要保存网页，或者页面特别复杂难度：★★★☆☆ | 效果：★★★★★

这是我最推荐的方法。Puppeteer 是谷歌官方出的一个工具，你可以把它理解成一个听话的机器人浏览器。你告诉它要去哪个网页，要点击哪些按钮，要滚动到哪里，它会自动帮你完成所有操作，然后把完整的页面保存下来。

准备工作

1. 先安装 Node.js（直接去官网 https://nodejs.org/ 下载，一路下一步就行）
2. 新建一个文件夹，名字随便起，比如叫 "网页保存工具"
3. 在这个文件夹里，按住 Shift 键右键点击空白处，选择 "在此处打开 PowerShell 窗口"
4. 输入下面两行命令，按回车执行：

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); });

如何使用这个脚本

1. 把脚本里CONFIG部分的url换成你要保存的网页地址
2. 按照方案二里教的方法，找到你页面上标签页和折叠面板的选择器，替换掉脚本里对应的部分
3. 在 PowerShell 窗口里输入：node save-page.js，按回车
4. 这时候你会看到一个浏览器窗口自动打开，然后自动滚动、自动点击所有按钮，最后自动保存成一个 HTML 文件

优点：完全自动化，一次写好脚本，以后只要改个网址就能用，能处理任何复杂的页面缺点：需要一点点学习成本，但学会了之后一劳永逸

方案四：专业归档工具（企业级）

谁适合用：需要保存大量网页，或者需要长期管理归档内容难度：★★★★☆ | 效果：★★★★★

如果你是做研究的，或者公司需要长期归档网页，推荐使用ArchiveBox。这是一个开源的自托管网页归档工具，功能比 SingleFile 强大得多。

它能做到：

• 自动执行 JS，触发所有懒加载和点击事件
• 同时保存为 HTML、PDF、截图、WARC 等多种格式
• 自动下载页面里的视频和音频
• 支持批量导入 URL 列表，一次性保存几百个网页
• 有一个网页界面，可以搜索和管理所有归档的内容

最简单的安装方法（用 Docker）：

docker 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(`正在保存第 ${i+1}/${URLS.length} 个页面: ${URLS[i]}`); await saveCompletePage(URLS[i], `页面${i+1}.html`); } console.log('✅ 所有页面都保存完成了！'); } batchSave();

五、常见问题解答

Q：保存后的页面点击按钮没反应怎么办？

A：这是正常的。我们保存的是静态的 HTML 文件，就像给页面拍了一张 "超级高清的照片"，能看到所有内容，但不能再交互了。如果你需要保留交互功能，可以用 ArchiveBox 保存为 WARC 格式。

Q：保存的页面样式错乱了，图片显示不出来怎么办？

A：99% 的情况是因为你用了浏览器自带的 "另存为"。换成 SingleFile 或者 Puppeteer 脚本，就不会有这个问题了。

Q：Puppeteer 运行报错怎么办？

A：最常见的原因是浏览器版本不兼容。执行下面的命令重新安装 puppeteer 就行：

npm uninstall puppeteer && npm install puppeteer

Q：网站有反爬机制，不让机器人访问怎么办？

A：把脚本里的headless设为false，这样机器人就会用正常的浏览器窗口访问，大部分反爬机制都检测不出来。

六、工具对比与选型指南

一句话选型建议：

• 偶尔用一次：选方案一
• 按钮多懒得点：选方案二
• 经常要用：选方案三
• 公司用或者要存很多：选方案四

最后

现代网页的动态加载技术确实给我们保存内容带来了很多麻烦，但只要掌握了正确的方法，就没有保存不了的网页。

希望这篇手册能帮你解决网页保存的难题。如果你有某个特定的网站怎么都保存不了，或者需要更复杂的功能，可以在评论区告诉我，我帮你写个定制化的脚本。