小知识------QT如何安装并使用QtWebEngineWidgets+python开发简单PDF阅读器
小知识------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阅读器的内容介绍完成啦,如果觉的对你有帮助的话,欢迎点赞加关注哟。
洛兮银儿: 已经解决
iconicici: 'pip' 不是内部或外部命令,也不是可运行的程序 或批处理文件。怎么办呢
今天也是个妖精头子呀: 楼主的方法1,2,3都接着执行了一遍,然后重新启动了jupyter,问题解决。赞!
普通网友: 写的很详细,感谢博主的分享。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】
普通网友: 干货满满,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】