ZetCode

PyQt QWebEngineView

最后修改于 2023 年 8 月 24 日

在本文中，我们将展示如何使用 QWebEngineView。

源代码可在 PyQt-Examples 代码库中找到。访问 Advanced PyQt5 电子书，阅读 PyQt5 教程，或列出所有 PyQt 教程。

PyQt QWebEngineView

QWebEngineView 是 Qt WebEngine 网页浏览模块的主要窗口部件组件。它用于显示 Web 内容。page 函数返回一个网页对象的引用。

QWebEnginePage 提供了一个用于查看和编辑 Web 文档的对象。

qtwebengine 必须单独安装。

$ sudo apt install python3-pyqt5.qtwebengine

此命令在基于 Debian 的 Linux 上安装 qtwebengine。

$ sudo pip install pyqtwebengine

通过 pip 工具安装的 qtwebengine。

PyQt QWebEngineView 简单示例

QWebEngineView 的 setHtml 方法将 Web 视图的内容设置为指定的 HTML 内容。

test.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
</head>
<body>
    <p>
        This is a simple HTML page.
    </p>
</body>
</html>

我们使用这个简单的 HTML 文档进行显示。

simple.py 
#!/usr/bin/python

import sys
from PyQt5.QtWidgets import QWidget, QApplication, QVBoxLayout
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        vbox = QVBoxLayout(self)

        self.webEngineView = QWebEngineView()
        self.loadPage()

        vbox.addWidget(self.webEngineView)

        self.setLayout(vbox)

        self.setGeometry(300, 300, 350, 250)
        self.setWindowTitle('QWebEngineView')
        self.show()

    def loadPage(self):

        with open('test.html', 'r') as f:

            html = f.read()
            self.webEngineView.setHtml(html)

def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在这个示例中，我们在一个 PyQt5 应用程序中显示一个简单的 HTML 文档。

self.webEngineView = QWebEngineView()

创建 QWebEngineView。

def loadPage(self):

    with open('test.html', 'r') as f:

        html = f.read()
        self.webEngineView.setHtml(html)

我们打开 HTML 文档，并使用 setHtml 将文档内容设置到 Web 视图中。

Simple QWebEngineView example
图：简单的 QWebEngineView 示例

PyQt QWebEngineView 导出为 PDF

printToPdf 函数将网页导出为 PDF 文件。

export_pdf.py 
#!/usr/bin/python

import sys
from PyQt5.QtWidgets import (QHBoxLayout, QPushButton, QWidget, 
    QApplication, QVBoxLayout, QMessageBox)
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        vbox = QVBoxLayout(self)
        hbox = QHBoxLayout()

        self.webEngineView = QWebEngineView()
        self.loadPage()

        expBtn = QPushButton('Export', self)
        expBtn.clicked.connect(self.onClicked)

        hbox.addWidget(expBtn)

        vbox.addWidget(self.webEngineView)
        vbox.addLayout(hbox)
        self.setLayout(vbox)

        self.setGeometry(300, 300, 350, 250)
        self.setWindowTitle('QWebEngineView')
        self.show()

    def onClicked(self):

        self.webEngineView.page().printToPdf('myfile.pdf')
        QMessageBox.information(self, 'info', 'page exported')

    def loadPage(self):

        with open('test.html', 'r') as f:

            html = f.read()
            self.webEngineView.setHtml(html)

def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

在这个示例中，我们将当前网页导出为 PDF 文件，并将其保存在当前工作目录中。

self.webEngineView.page().printToPdf('myfile.pdf')

我们使用 page 函数获取当前页面的引用，并使用 printToPdf 函数将其导出并保存。

PyQt QWebEngineView 前进和后退

在下面的示例中，我们实现了前进和后退按钮。canGoBack 和 canGoForward 告诉我们是否存在先前和后续的会话历史记录条目。

back_forw.py 
#!/usr/bin/python

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import (QApplication, QLineEdit, QMainWindow, 
    QPushButton, QToolBar)
from PyQt5.QtWebEngineWidgets import QWebEnginePage, QWebEngineView


class Example(QMainWindow):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()


    def initUI(self):

        self.toolBar = QToolBar(self)
        self.addToolBar(self.toolBar)

        self.backBtn = QPushButton(self)
        self.backBtn.setEnabled(False)

        self.backBtn.setIcon(QIcon(':/qt-project.org/styles/commonstyle/images/left-32.png'))
        self.backBtn.clicked.connect(self.back)
        self.toolBar.addWidget(self.backBtn)

        self.forBtn = QPushButton(self)
        self.forBtn.setEnabled(False)
        self.forBtn.setIcon(QIcon(':/qt-project.org/styles/commonstyle/images/right-32.png'))

        self.forBtn.clicked.connect(self.forward)
        self.toolBar.addWidget(self.forBtn)

        self.address = QLineEdit(self)
        self.address.returnPressed.connect(self.load)
        self.toolBar.addWidget(self.address)

        self.webEngineView = QWebEngineView(self)
        self.setCentralWidget(self.webEngineView)

        self.webEngineView.page().urlChanged.connect(self.onLoadFinished)

        self.webEngineView.page().titleChanged.connect(self.setWindowTitle)
        self.webEngineView.page().urlChanged.connect(self.urlChanged)

        self.setGeometry(300, 300, 500, 400)
        self.setWindowTitle('QWebEnginePage')
        self.show()

    def onLoadFinished(self):

        if self.webEngineView.history().canGoBack():
            self.backBtn.setEnabled(True)
        else:
            self.backBtn.setEnabled(False)

        if self.webEngineView.history().canGoForward():
            self.forBtn.setEnabled(True)
        else:
            self.forBtn.setEnabled(False)


    def load(self):

        url = QUrl.fromUserInput(self.address.text())

        if url.isValid():
            self.webEngineView.load(url)

    def back(self):
        self.webEngineView.page().triggerAction(QWebEnginePage.Back)

    def forward(self):
        self.webEngineView.page().triggerAction(QWebEnginePage.Forward)

    def urlChanged(self, url):
        self.address.setText(url.toString())


def main():

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

我们有一个带有前进和后退按钮的工具栏。按钮旁边是地址栏。当我们在地址栏中输入其地址时，会加载一个网页。

self.backBtn = QPushButton(self)
self.backBtn.setEnabled(False)

起初，历史记录中没有任何项目；因此，按钮是禁用的。

self.address = QLineEdit(self)
self.address.returnPressed.connect(self.load)
self.toolBar.addWidget(self.address)

按下 Enter/Return 键后，我们加载地址栏中的页面。地址栏是一个 QLineEdit。

self.webEngineView.page().urlChanged.connect(self.onLoadFinished)

页面加载后，我们检查历史记录中是否有项目，并相应地启用或禁用按钮。

self.webEngineView.page().titleChanged.connect(self.setWindowTitle)

这一行将窗口标题更新为网页的标题。

self.webEngineView.page().urlChanged.connect(self.urlChanged)

当我们在历史记录中后退或前进时，我们确保地址栏得到更新。

def onLoadFinished(self):

    if self.webEngineView.history().canGoBack():
        self.backBtn.setEnabled(True)
    else:
        self.backBtn.setEnabled(False)

    if self.webEngineView.history().canGoForward():
        self.forBtn.setEnabled(True)
    else:
        self.forBtn.setEnabled(False)

onLoadFinished 检查我们是否可以在历史记录中后退或前进。按钮会相应地被启用/禁用。

def load(self):

    url = QUrl.fromUserInput(self.address.text())

    if url.isValid():
        self.webEngineView.load(url)

在 load 函数中，我们从地址栏获取网页，并检查该页面是否为有效的 URL。如果有效，则使用 QWebEngineView 的 load 函数加载页面。

def back(self):
    self.webEngineView.page().triggerAction(QWebEnginePage.Back)

要后退，我们触发 QWebEnginePage.Back 动作。

def forward(self):
    self.webEngineView.page().triggerAction(QWebEnginePage.Forward)

要前进，我们触发 QWebEnginePage.Forward 动作。

QWebEngineView back/forward example
图：QWebEngineView 前进/后退示例

在本文中，我们介绍了 PyQt 的 QWebEngineView。

作者

我的名字是 Jan Bodnar，我是一名充满热情的程序员，拥有丰富的编程经验。我从 2007 年开始撰写编程文章。至今，我已撰写了超过 1400 篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出所有 PyQt 教程。