Python3.x环境下如何将带CSS的HTML渲染结果保存为JPG格式图片

旧版IPython.display.HTML仅支持在交互Notebook内做页面展示，本身没有调用页面渲染管线完成截图导出的能力，且适配版本仅覆盖Python2，已不适应当前Python3的运行环境。
对比其他轻量HTML转图工具，基于无头Chrome的渲染方案对CSS的兼容性和真实浏览器完全一致，不会出现布局错位、样式丢失的问题，可直接兼容带内嵌、外联CSS的本地HTML页面导出需求。

一、环境依赖配置 #

• 执行pip命令安装适配Python3的依赖包：pip install selenium webdriver-manager pillow

  说明：webdriver-manager会自动匹配本地已安装的Chrome/Edge浏览器版本，无需手动下载对应驱动，兼容Python3.6及以上所有正式版本，不存在Python版本弃用的兼容问题。

• 无需修改现有test_page.html、外联样式mystyle.css的任何代码，原有页面的所有样式渲染逻辑可完全保留。

二、可直接复用的导出代码 #

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from PIL import Image
import os

# 配置无头浏览器参数，运行过程无弹窗
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument("--headless=new")  # 新版无头模式，渲染精度和实体打开浏览器完全一致
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--window-size=1000,700")  # 匹配页面容器尺寸，避免多余白边
chrome_options.add_argument("--hide-scrollbars")

# 初始化浏览器驱动
driver = webdriver.Chrome(
    service=Service(ChromeDriverManager().install()),
    options=chrome_options
)

# 加载本地HTML页面，自动关联同路径下的外联CSS文件
html_file_path = "/content/drive/MyDrive/Analysed/Task2/test_page.html"
driver.get(f"file://{os.path.abspath(html_file_path)}")

# 预留2秒等待时间，确保页面、外联CSS完全渲染完成
driver.implicitly_wait(2)

# 先生成临时PNG截图，再转换为标准JPG格式
temp_png_path = "temp_render_screenshot.png"
final_jpg_path = "exported_render.jpg"
driver.save_screenshot(temp_png_path)

# 转换格式时去掉PNG的透明通道，适配JPG格式要求
with Image.open(temp_png_path) as render_img:
    jpg_img = render_img.convert("RGB")
    jpg_img.save(final_jpg_path, "JPEG", quality=95)

# 清理临时资源
os.remove(temp_png_path)
driver.quit()

print(f"JPG渲染文件已保存，路径为: {os.path.abspath(final_jpg_path)}")

三、运行说明 #

• 最终导出的JPG文件渲染效果和在Notebook中看到的页面完全一致，无样式丢失、布局错位问题。
• 导出文件不会包含浏览器窗口边框、滚动条等冗余元素，尺寸和页面设计的1000*700容器范围完全匹配。
• 整个流程可完全后台运行，可直接嵌入现有自动化处理脚本，不需要人工干预。

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