小知识------QT如何使用QtWebEngineWidgets
缘起QtWebEngineWidgets组件安装开发环境介绍QtWebEngineWidgets安装前提QtWebEngineWidgets的安装
QtWebEngineWidgets组件使用
缘起
最近希望利用QT中QtWebEngineWidgets组件加Python做一个简单的PDF阅读器，进行PDF内容显示，但是在实际开发过程中却遇到了各种问题，主要包括如下几个问题：
QtWebEngineWidgets组件如何安装；安装完QtWebEngineWidgets组件后，QtCreator中的组件栏内，并无QtWebEngineWidgets插件可选；手工将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阅读器的内容介绍完成啦，如果觉的对你有帮助的话，欢迎点赞加关注哟。
相关链接
您阅读本篇文章共花了：
发表评论