小知识------QT如何安装并使用QtWebEngineWidgets+python开发简单PDF阅读器

缘起

最近希望利用QT中QtWebEngineWidgets组件加Python做一个简单的PDF阅读器，进行PDF内容显示，但是在实际开发过程中却遇到了各种问题，主要包括如下几个问题：

1. QtWebEngineWidgets组件如何安装；
2. 安装完QtWebEngineWidgets组件后，QtCreator中的组件栏内，并无QtWebEngineWidgets插件可选；
3. 手工将QtWebEngineWidgets组件绑定道Widgets组件时，提示找不到头文件，或者找不到对应类。
   以上碰到的3个问题，由于并非专业QT开发，在经过一番折腾后才总算解决了，在此记录下，希望能帮助遇到相同问题的朋友。

QtWebEngineWidgets组件安装

开发环境介绍

• 操作系统：Windows 10
• 开发语言：python（仅用作业务开发语言）
• Qt：Qt 5.12.12 + Qt 5.15.2共存
• QtCreator：5.0.2 + 11.0.0共存（主要用于界面设计，我主要需要ui文件）

QtWebEngineWidgets安装前提

• 在Qt5.4之前类似于QtWebEngineWidgets的插件叫QtWebKit，所以Qt4.5之前，并没有QtWebEngineWidgets插件。
• 在Qt5.4之后，QtWebEngineWidgets插件替代了原来的QtWebKit插件。因此，在安装QtWebEngineWidgets时，要先确认你的QT版本问题。
• 重点：只有MSVC才支持该对象。

QtWebEngineWidgets的安装

QtWebEngineWidgets安装主要利用了QT自身的维护工具，名叫MaintenanceTool，该工具在QT安装主目录下，如下图所示：

启动该工具，进入“添加或移除组件”项菜单，进入如下界面：

点击Qt节点，找到你自己的Qt版本，勾选上MSVC（版本自选），并勾选上Qt WebEngine然后点击下一步就可以安装了。

安装完后，QtWebEngineWidgets应该就能正常使用了，但是你在Qt Creator中依然看不到这个插件，那么如何去使用呢？请接着往下看。

QtWebEngineWidgets组件使用

为了演示QtWebEngineWidgets组件的使用，我们以开发一个简单的PDF阅读器为案例为大家讲解。

• 第一步界面设计：首先在Qt Creator中进行界面设计，就包含一个打开按钮和一个PDF显示控件，界面如下蓝框为PDF显示控件，使用的是Widget控件：
  

• 第二步Widgets控件和QtWebEngineWidgets类绑定：为Widgets控件绑定QtWebEngineWidgets类，首先右键点击Widgets控件，然后选择promoted to，并在promoted class name和Header File中分别填入QWebEngineView和QWebEngineView.h，如下图所示：
  
  然后点击Add，在点击Promote。

• 第三步添加webenginewidgets到.pro文件，如下图所示：
  
  到此，我们便将WebEngineWidgets控件设置完成了，已经可以正常使用他了，在未添加QT += webenginewidgets 代码之前，我们是无法在QTCreator中运行该工程文件的，会报类似如下错误代码：webenginewidgets.h找不到。

• 第四步将QT工程转换为python文件
  转换代码如下所示：

# ui_PdfReader.py为输出python文件;Widget.ui为QtCreator工程中的UI文件。
pyuic5.exe -o ui_PdfReader.py Widget.ui 

查看ui_PdfReader.py文件，如下所示：

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Widget(object):
    def setupUi(self, Widget):
        Widget.setObjectName("Widget")
        Widget.resize(800, 600)
        self.gridLayout = QtWidgets.QGridLayout(Widget)
        self.gridLayout.setObjectName("gridLayout")
        self.pushButton = QtWidgets.QPushButton(Widget)
        self.pushButton.setObjectName("pushButton")
        self.gridLayout.addWidget(self.pushButton, 0, 0, 1, 1)
        self.widget = QtWebEngineWidgets.QWebEngineView(Widget)  ##QtWebEngineWidgets控件
        self.widget.setStyleSheet("#widget\n"
"{\n"
"frame{border:2px; solid #014F84}\n"
"background:transparent;\n"
"border:1px solid #014F84;\n"
"}")
        self.widget.setObjectName("widget")
        self.gridLayout.addWidget(self.widget, 1, 0, 1, 1)

        self.retranslateUi(Widget)
        QtCore.QMetaObject.connectSlotsByName(Widget)

    def retranslateUi(self, Widget):
        _translate = QtCore.QCoreApplication.translate
        Widget.setWindowTitle(_translate("Widget", "Widget"))
        self.pushButton.setText(_translate("Widget", "打开"))
from PyQt5 import QtWebEngineWidgets  #引入QtWebEngineWidgets控件

通过代码可以看到QtWebEngineWidgets组件被自动加载进来了。

• 编写PDF显示代码
  代码主要包括两个部分，一个是文件选择按钮功能实现，一个是让PDF在QtWebEngineWidgets中正常显示的功能实现，我们本案例中都将其编写在打开按钮槽函数中，全部代码如下所示：

import sys
import os

from PyQt5.QtWidgets import QApplication, QWidget, QFileDialog, QMessageBox
from PyQt5.QtCore import pyqtSlot, QUrl
from PyQt5.QtGui import QIcon
from PyQt5 import QtWebEngineWidgets

from ui_PdfReader import Ui_Widget

class smartDocWin(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_Widget()
        self.ui.setupUi(self)
        

    @pyqtSlot()
    def on_pushButton_clicked(self):
        # 文件选择功能
        self.__srcFilePath, _ = QFileDialog.getOpenFileName(self, "选择PDF文件", "./", "*.pdf")

        # PDF显示功能
        settings = self.ui.widget.settings()
        settings.setAttribute(QtWebEngineWidgets.QWebEngineSettings.PluginsEnabled, True)
        url = QUrl.fromLocalFile(self.__srcFilePath)
        self.ui.widget.load(url)
        

if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = smartDocWin()
    form.show()
    sys.exit(app.exec_())

PDF阅读区运行效果如下所示：

至此，QtWebEngineWidgets控件的安装于使用和python开发PDF阅读器的内容介绍完成啦，如果觉的对你有帮助的话，欢迎点赞加关注哟。