PyQT5将外部网页显示到控件中

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

很多时候我们需要使用外部的网页元素，而且需要做到控件嵌入的目的，这样我们就可以方便的调用一些现成的网页元素来丰富我们的控件，PyQT5中的QtWebEngineWidgets控件就是用来进行外部网页嵌入的，但看控件的名称就可以见明知意。

下面先上代码，然后通过对每一行代码的解析进一步了解这个控件的使用。

from PyQt5 import QtWebEngineWidgets
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt5.QtCore import QTimer
import plotly.express as px
import pandas as pd
import requests
from PyQt5.QtCore import QUrl
from PyQt5 import QtWidgets
import time

class Widget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setWindowTitle('show web')
        self.timer = QTimer()
        self.browser = QtWebEngineWidgets.QWebEngineView(self)
        # 加载外部页面，以百度地图为例
        self.browser.load(
            QUrl('网页地址')
        )
        # 创建一个label标签，用于显示当前系统时间
        self.labels = QtWidgets.QLabel(self)
        # 启动定时器
        self.timer.start(1000)
        # 将定时器关联到槽函数
        self.timer.timeout.connect(self.showLocaltime)
        # 设置垂直布局
        vlayout = QVBoxLayout(self)
        # 将显示的界面添加到QT控件
        vlayout.addWidget(self.browser)
        # 将时间显示标签添加到控件中
        vlayout.addWidget(self.labels)

    # 显示当前时间槽函数
    def showLocaltime(self):
        self.labels.setText(str(time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(time.time()))))


# 主函数调用
if __name__ == "__main__":
    app = QApplication([])
    widget = Widget()
    widget.show()
    # 事件循环
    app.exec()

self.browser = QtWebEngineWidgets.QWebEngineView(self)的作用就是类似于对控件的实例化。 self.browser.load(QUrl('网页地址'))这行代码的作用是加载外部网页，比如说我们设计地图时，可以直接加载百度地图的网页进来，这个网页地址自己随意填写，可以是本地的html文件的地址，也可以是网络中的网页地址，例如本博客的url等。

其它的代码主要就是标签控件的实例化、定时器的实例化、定时器的启动、面板中布局的实例化，然后将控件添加到面板中。

其中，showLocaltime函数是一个槽函数，主要是在创建的标签中显示当前的系统时间。上述代码运行的结果如下。

控件加载出来与网页一样，支持界面的交互操作，其实现的原理我个人感觉类似于Django里面的render操作，就是将一个网页映射到控件中，这样保留了网页的所有属性，但是不能像网页中那样通过F12查看源码，但是基本的交互，放大缩小，查询等等，原来网页支持的嵌入后仍然支持。