使用wxPython实现逐行加载HTML内容并实时显示效果_Python

c:\pythoncode\new\simulateclaudegenhtml.py

全部代码

import wx
import wx.html2
import time

class htmlviewerapp(wx.frame):
    def __init__(self, *args, **kw):
        super(htmlviewerapp, self).__init__(*args, **kw)

        # 创建界面布局
        panel = wx.panel(self)
        vbox = wx.boxsizer(wx.horizontal)

        # 创建memo文本区域，并设置黑色背景和白色文字
        self.memo = wx.textctrl(panel, style=wx.te_multiline | wx.te_readonly)
        self.memo.setbackgroundcolour("#000000")
        self.memo.setforegroundcolour("#ffffff")
        vbox.add(self.memo, proportion=1, flag=wx.expand | wx.all, border=5)

        # 创建右侧webview组件用于显示html效果
        self.browser = wx.html2.webview.new(panel)
        vbox.add(self.browser, proportion=1, flag=wx.expand | wx.all, border=5)

        panel.setsizer(vbox)

        # 创建菜单栏选择html文件
        menubar = wx.menubar()
        filemenu = wx.menu()
        openitem = filemenu.append(wx.id_open, 'open', 'open html file')
        menubar.append(filemenu, "&file")
        self.setmenubar(menubar)  # 修改为 self.setmenubar

        # 绑定打开文件事件
        self.bind(wx.evt_menu, self.onopenfile, openitem)

        self.lines = []  # 用于存储html文件的行内容
        self.line_index = 0  # 当前行的索引
        self.timer = wx.timer(self)  # 创建定时器
        self.bind(wx.evt_timer, self.ontimer, self.timer)  # 绑定定时器事件

    def onopenfile(self, event):
        """打开并读取html文件"""
        with wx.filedialog(self, "open html file", wildcard="html files (*.html;*.htm)|*.html;*.htm",
                           style=wx.fd_open | wx.fd_file_must_exist) as dialog:
            if dialog.showmodal() == wx.id_ok:
                file_path = dialog.getpath()
                with open(file_path, 'r', encoding='utf-8') as file:
                    self.lines = file.readlines()
                
                self.memo.clear()  # 清空memo内容
                self.line_index = 0  # 重置行索引
                self.timer.start(100)  # 每100毫秒加载一行

    def ontimer(self, event):
        """定时器事件：逐行加载html内容"""
        if self.line_index < len(self.lines):
            line = self.lines[self.line_index]
            self.memo.appendtext(line)  # 在memo中添加当前行
            self.line_index += 1  # 增加行索引
        else:
            self.timer.stop()  # 停止定时器
            self.displayhtml()  # 加载完成后显示html

    def displayhtml(self):
        """在webview中显示html内容"""
        html_content = ''.join(self.lines)  # 将所有行合并为完整html
        self.browser.setpage(html_content, "")

# 主应用程序
if __name__ == '__main__':
    app = wx.app(false)
    frame = htmlviewerapp(none, title="html viewer", size=(800, 600))
    frame.show()
    app.mainloop()

1. 项目目标

本项目实现的目标是：

选择并打开一个 html 文件。
将 html 文件的内容逐行加载到一个文本框（memo）中，背景色为黑色，文字为白色，给人一种逐行“输入”的效果。
在加载完所有内容后，在右侧的浏览器组件中显示完整的 html 页面效果。

2. 代码实现

让我们逐步分析实现该功能的完整代码：

import wx
import wx.html2
import time

首先导入 wxpython 模块 wx 和 wx.html2。 wx.html2 提供了 webview 类，可以用于在应用程序中嵌入一个浏览器，适合用来显示 html 内容。

2.1 创建主窗口类

class htmlviewerapp(wx.frame):
    def __init__(self, *args, **kw):
        super(htmlviewerapp, self).__init__(*args, **kw)

定义一个主窗口类 htmlviewerapp，它继承自 wx.frame。wx.frame 是 wxpython 中用于创建主窗口的类。

        panel = wx.panel(self)
        vbox = wx.boxsizer(wx.horizontal)

创建一个 wx.panel 和一个水平布局管理器 wx.boxsizer。 panel 是窗口内的容器控件，用于放置其他控件，而 boxsizer 允许我们灵活控制控件的布局。

2.2 创建文本框和浏览器组件

        self.memo = wx.textctrl(panel, style=wx.te_multiline | wx.te_readonly)
        self.memo.setbackgroundcolour("#000000")
        self.memo.setforegroundcolour("#ffffff")
        vbox.add(self.memo, proportion=1, flag=wx.expand | wx.all, border=5)

在这里，我们创建一个 wx.textctrl 作为 memo 文本区域，用于逐行显示 html 代码。设置了黑色背景和白色文字，样式指定为多行不可编辑。接着将文本框添加到水平布局管理器中。

        self.browser = wx.html2.webview.new(panel)
        vbox.add(self.browser, proportion=1, flag=wx.expand | wx.all, border=5)

创建一个 wx.html2.webview 浏览器组件并添加到布局中。webview 用于显示 html 文件的最终效果。

        panel.setsizer(vbox)

将水平布局管理器设置为 panel 的布局。

2.3 设置菜单栏并绑定事件

        menubar = wx.menubar()
        filemenu = wx.menu()
        openitem = filemenu.append(wx.id_open, 'open', 'open html file')
        menubar.append(filemenu, "&file")
        self.setmenubar(menubar)

创建菜单栏和文件菜单，并添加一个 open 选项用于选择 html 文件。self.setmenubar(menubar) 将菜单栏绑定到主窗口。

        self.bind(wx.evt_menu, self.onopenfile, openitem)

将菜单项绑定到 onopenfile 方法，用于处理文件打开事件。

2.4 定义定时器与初始化属性

        self.lines = []  # 用于存储html文件的行内容
        self.line_index = 0  # 当前行的索引
        self.timer = wx.timer(self)  # 创建定时器
        self.bind(wx.evt_timer, self.ontimer, self.timer)  # 绑定定时器事件

定义 self.lines 用于存储 html 文件的行，self.line_index 表示当前行索引，self.timer 为定时器，用于逐行加载 html 内容。 wx.evt_timer 事件绑定到 ontimer 方法。

2.5 打开并读取 html 文件

    def onopenfile(self, event):
        with wx.filedialog(self, "open html file", wildcard="html files (*.html;*.htm)|*.html;*.htm",
                           style=wx.fd_open | wx.fd_file_must_exist) as dialog:
            if dialog.showmodal() == wx.id_ok:
                file_path = dialog.getpath()
                with open(file_path, 'r', encoding='utf-8') as file:
                    self.lines = file.readlines()
                
                self.memo.clear()  # 清空memo内容
                self.line_index = 0  # 重置行索引
                self.timer.start(100)  # 每100毫秒加载一行

在 onopenfile 方法中，打开一个文件对话框选择 html 文件，成功选择后读取文件内容到 self.lines 列表中。清空 memo 的内容，重置行索引，并启动定时器，每100毫秒调用 ontimer 一次。

2.6 定时器方法：逐行加载 html 内容

    def ontimer(self, event):
        if self.line_index < len(self.lines):
            line = self.lines[self.line_index]
            self.memo.appendtext(line)  # 在memo中添加当前行
            self.line_index += 1  # 增加行索引
        else:
            self.timer.stop()  # 停止定时器
            self.displayhtml()  # 加载完成后显示html

ontimer 方法负责逐行加载 html 内容。当 line_index 小于 lines 长度时，将当前行内容追加到 memo 中并更新索引。所有行加载完毕后，停止定时器并调用 displayhtml。

2.7 在浏览器中显示 html 内容

    def displayhtml(self):
        html_content = ''.join(self.lines)  # 将所有行合并为完整html
        self.browser.setpage(html_content, "")

displayhtml 将 lines 列表中的内容合并为完整 html 字符串，并在浏览器中显示。

3. 完整代码

以下是完整的代码：

import wx
import wx.html2
import time

class htmlviewerapp(wx.frame):
    def __init__(self, *args, **kw):
        super(htmlviewerapp, self).__init__(*args, **kw)

        panel = wx.panel(self)
        vbox = wx.boxsizer(wx.horizontal)

        self.memo = wx.textctrl(panel, style=wx.te_multiline | wx.te_readonly)
        self.memo.setbackgroundcolour("#000000")
        self.memo.setforegroundcolour("#ffffff")
        vbox.add(self.memo, proportion=1, flag=wx.expand | wx.all, border=5)

        self.browser = wx.html2.webview.new(panel)
        vbox.add(self.browser, proportion=1, flag=wx.expand | wx.all, border=5)

        panel.setsizer(vbox)

        menubar = wx.menubar()
        filemenu = wx.menu()
        openitem = filemenu.append(wx.id_open, 'open', 'open html file')
        menubar.append(filemenu, "&file")
        self.setmenubar(menubar)

        self.bind(wx.evt_menu, self.onopenfile, openitem)

        self.lines = []
        self.line_index = 0
        self.timer = wx.timer(self)
        self.bind(wx.evt_timer, self.ontimer, self.timer)

    def onopenfile(self, event):
        with wx.filedialog(self, "open html file", wildcard="html files (*.html;*.htm)|*.html;*.htm",
                           style=wx.fd_open | wx.fd_file_must_exist) as dialog:
            if dialog.showmodal() == wx.id_ok:
                file_path = dialog.getpath()
                with open(file_path, 'r', encoding='utf-8') as file:
                    self.lines = file.readlines()
                
                self.memo.clear()
                self.line_index = 0
                self.timer.start(100)

    def ontimer(self, event):
        if self.line_index < len(self.lines):
            line = self.lines[self.line_index]
            self.memo.appendtext(line)
            self.line_index += 1
        else:
            self.timer.stop()
            self.displayhtml()

    def displayhtml(self):
        html_content = ''.join(self.lines)
        self.browser.setpage(html_content, "")

if __name__ == '__main__':
    app = wx.app(false)
    frame = htmlviewerapp(none, title="html viewer", size=(800, 600))
    frame.show()
    app.mainloop()