使用kora.selenium保存静态网页遇HTML变动，如何留存内容与图片？

问题根源：CNBC页面依赖JavaScript动态渲染内容，wd.get()执行完后页面可能仍在加载；直接保存的HTML图片为远程链接，本地打开无法显示。

按以下步骤修改代码即可解决：

1. 等待页面完全渲染 #

用WebDriverWait等待页面核心元素加载完成，确保动态内容全部渲染。

2. 下载图片并替换本地路径 #

解析HTML提取图片链接，下载到本地文件夹，同时替换HTML内的图片路径为本地路径，保证本地打开时图片正常显示。

完整代码 #

# 安装依赖包
!pip install kora requests beautifulsoup4
from kora.selenium import wd
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import requests
from bs4 import BeautifulSoup
import os

# 创建图片存储文件夹
img_folder = "page_images"
os.makedirs(img_folder, exist_ok=True)

# 访问目标页面
target_url = "https://www.cnbc.com/2022/01/03/5-ways-to-reset-your-retirement-savings-and-save-more-money-in-2022.html"
wd.get(target_url)

# 等待文章主体加载完成（选择器根据页面实际结构调整）
wait = WebDriverWait(wd, 20)
wait.until(EC.presence_of_element_located((By.CLASS_NAME, "ArticleBody-articleBody")))

# 获取完整页面源码
full_source = wd.page_source

# 解析并处理图片
soup = BeautifulSoup(full_source, "html.parser")
for img_tag in soup.find_all("img"):
    img_url = img_tag.get("src")
    if img_url and img_url.startswith("http"):
        try:
            # 下载图片
            img_data = requests.get(img_url).content
            # 处理文件名，去除URL参数
            img_filename = os.path.basename(img_url.split("?")[0])
            local_img_path = os.path.join(img_folder, img_filename)
            with open(local_img_path, "wb") as f:
                f.write(img_data)
            # 替换HTML中的图片路径
            img_tag["src"] = local_img_path
        except Exception as err:
            print(f"图片下载失败: {img_url}, 错误信息: {err}")

# 保存静态HTML文件
with open("static_cnbc_page.html", "w", encoding="utf-8") as f:
    f.write(str(soup))

# 关闭浏览器实例
wd.quit()

注意事项 #

• 等待元素的选择器需匹配页面实际结构，可通过浏览器开发者工具查看元素的类名或ID。
• 若部分图片下载失败，会打印错误但不中断整体流程，不影响HTML保存。
• 保存后需将static_cnbc_page.html和page_images文件夹放在同一目录下，本地打开HTML才能正常显示图片。

内容的提问来源于stack exchange，提问作者backlog