How to add(render) HTML file in PyQT5 Dialog Box

Nov 1, 2020

In this article, I will show you how I add or render HTML files in PyQt5 Dialog box python GUI.

First of all you will need the following installed
Python 3 or higher
PyQt5
PyQtWebEngine

pip install pyqt5
pip install PyQtWebEngine

You need two separate file Dialog File and HTML file

First, create your HTML file with your required content or you can copy my code.

<!DOCTYPE html><html><head><style>table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}tr:nth-child(even) {background-color: #dddddd;}</style></head><body><h2>HTML Table</h2><table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr></table></body></html>

Now Create your Dialog box file using Qt Designer or you can code your custom dialog box in python or use the following code.

from PyQt5 import QtCore, QtGui, QtWidgets,QtWebEngineWidgets
import os
class Ui_Dialog(object):
def setupUi(self, Dialog):
    Dialog.setObjectName("Dialog")
    Dialog.resize(400, 300)
    self.verticalLayout = QtWidgets.QVBoxLayout(Dialog)
    self.verticalLayout.setObjectName("verticalLayout")
    self.centralwidget = QtWidgets.QWidget(Dialog)
    self.centralwidget.setObjectName("centralwidget")
    self.webEngineView =               QtWebEngineWidgets.QWebEngineView(self.centralwidget)
    self.webEngineView.load(QtCore.QUrl().fromLocalFile(os.path.split(os.path.abspath(__file__))[0]+r'\html\test.html'))
    self.verticalLayout.addWidget(self.webEngineView)
    self.buttonBox = QtWidgets.QDialogButtonBox(Dialog)
    self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
    self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Cancel|QtWidgets.QDialogButtonBox.Ok)
    self.buttonBox.setObjectName("buttonBox")
    self.verticalLayout.addWidget(self.buttonBox)
    self.retranslateUi(Dialog)
    self.buttonBox.accepted.connect(Dialog.accept)
    self.buttonBox.rejected.connect(Dialog.reject)
    QtCore.QMetaObject.connectSlotsByName(Dialog)def retranslateUi(self, Dialog):
    _translate = QtCore.QCoreApplication.translate
    Dialog.setWindowTitle(_translate("Dialog", "Dialog"))if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

That’s It just run and see the magic.

Thank you for reading.

How to add(render) HTML file in PyQT5 Dialog Box

Written by Rojan Dhimal