Open and Save HTML in a PyQt5 Browser

In this tutorial, you'll learn how to add open and save HTML file dialogs to a PyQt5 web browser. Using QFileDialog, you can load local HTML files into your browser and save web page content to disk — essential features for any custom Python web browser.

Adding a File Menu with QAction

A File menu is added with self.menuBar().addMenu("&File"), assigning the F key as an Alt-shortcut. Once we have the menu object, we can add QAction objects to it to create the entries. We create two basic entries here for opening and saving HTML files from a local disk. These both require custom slot methods.

file_menu = self.menuBar().addMenu("&File")

open_file_action = QAction( QIcon( os.path.join('icons','disk--arrow.png') ), "Open file...", self)
open_file_action.setStatusTip("Open from file")
open_file_action.triggered.connect( self.open_file )
file_menu.addAction(open_file_action)

save_file_action = QAction( QIcon( os.path.join('icons','disk--pencil.png') ), "Save Page As...", self)
save_file_action.setStatusTip("Save current page to file")
save_file_action.triggered.connect( self.save_file )
file_menu.addAction(save_file_action)

Opening a Local HTML File with QFileDialog

The slot method for opening a file uses the built-in QFileDialog.getOpenFileName() method to create a file-open dialog and get a filename. We restrict the selectable files by default to those matching *.htm or *.html.

We read the file into a variable html using standard Python file handling, then use .setHtml() to load the HTML into the browser.

def open_file(self):
    filename, _ = QFileDialog.getOpenFileName(self, "Open file", "",
                    "Hypertext Markup Language (*.htm *.html);;"
                    "All files (*.*)")

    if filename:
        with open(filename, 'r') as f:
            html = f.read()

        self.browser.setHtml( html )
        self.urlbar.setText( filename )

The getOpenFileName() method returns a tuple containing the selected filename and the filter used. We unpack the filename and use Python's built-in open() to read the contents. The setHtml() method on QWebEngineView renders the loaded HTML directly in the browser widget.

Saving a Web Page to an HTML File with QFileDialog

Similarly, to save the HTML from the current page, we use the built-in QFileDialog.getSaveFileName() to get a filename. However, this time we get the HTML from self.browser.page().toHtml() and write it to the selected filename. Again we use standard Python functions for the file handler.

def save_file(self):
    filename, _ = QFileDialog.getSaveFileName(self, "Save Page As", "",
                    "Hypertext Markup Language (*.htm *html);;"
                    "All files (*.*)")

    if filename:
        html = self.browser.page().toHtml()
        with open(filename, 'w') as f:
            f.write(html)

The toHtml() method retrieves the full HTML source of the currently loaded page, including any dynamically generated content. The getSaveFileName() dialog lets the user choose where to save the file, with the HTML file filter pre-selected.

Now we have the basic file operations in place. In the next part we'll improve the interface further by adding a custom Help & About dialog to inform our users.