How to popup a file dialog/print dialog in a html file that is rendered in a WebEngineView?

Question

I have a local html file that use highcharts to display my data and save to images, it works well in chrome browser, then I try to load it in Qt 5.9.4 with a WebEngineView (QML type), all the popup dialogs are unable to dispaly.

html file code: https://jsfiddle.net/sylaince/9x9j5Lpj/

<div id="container" style="width: 100%; min-height: 400px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
    Highcharts.setOptions({
        navigation: {
            menuItemStyle: {
                padding: '6px 14px'
            }
        }
    });
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        exporting: {
            filename: 'data'
        },
        title: {
            text: 'export file'
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        series: [{
            name: 'test data',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
</script>

qml file:

Page {  
    WebEngineView {
        id: webView
        anchors.fill: parent
        url: "qrc:/html/index.html"
    }
}

How to make WebEngineView to show dialog such as file dialog, print dialog, etc.

eyllanesc · Accepted Answer · 2019-07-04T05:24:45.020

The pop ups are of 3 types:

Print preview
Download files.
Navigating to another page

So indicate the solution in parts:

1.Print preview

It appears it's still not implemented in Qt: https://bugreports.qt.io/browse/QTBUG-57982, an workaround suggested in the comments of tickets is to print in PDF and then to show that PDF (for example, with pdf.js), I have tried it but I have not had luck.

2.Download files

This question is similar to a previous question that I answered.

As I said in my previous answer: That popup window is generated by the browser, in the case of QWebEngine we must create it.

to create the dialog we can use the QML FileDialog, but these are not blocking so you will have to accept the download and that behavior is not what is seen in a conventional browser, so my solution will use the QWidgets QFileDialog since Allows waiting and being able to verify acceptance. For the implementation implement a helper that allows us to manage it.

class DownloadHelper: public QObject{
    Q_OBJECT
public:
    Q_INVOKABLE void onDownloadRequested(QObject * download){
        QString old_path = download->property("path").toString();
        QString suffix = QFileInfo(old_path).suffix();
        QString path  = QFileDialog::getSaveFileName(nullptr, "Save File", old_path, "*."+suffix);
        if(!path.isEmpty()){
            download->setProperty("path", path);
            bool accepted = QMetaObject::invokeMethod(download, "accept"); 
            Q_ASSERT(accepted);
        }
    }
};
# ...
DownloadHelper helper;
engine.rootContext()->setContextProperty("downloadHelper", &helper);
# ...

*.qml

WebEngineView {
    id: webView
    anchors.fill: parent
    url: "qrc:/html/index.html"
    profile.onDownloadRequested: downloadHelper.onDownloadRequested(download)
    // ...

3.Navigating to another page

When the "Open in HighCharts Cloud" menu is pressed, it launches a request to open a new window, to use it we use the newViewRequested signal creating a window dynamically:

WebEngineView {
    id: webView
    // ...

    onNewViewRequested: {
        var newWindow = Qt.createQmlObject('import QtQuick.Window 2.2;
                                            import QtWebEngine 1.5;
                                             Window {
                                                width: 640; height: 480;
                                                visible: true;
                                                property alias wv: wv
                                                WebEngineView{id:wv; anchors.fill: parent}}',
                                           webView,
                                           "dynamicSnippet1");
        console.log(newWindow.wv)
        request.openIn(newWindow.wv)
    }

_{The full implementation can be found at the following link.}

There is another problem. It works in debug mode, dialog can open properly but no file downloaded in release mode. Have you found this problem? — Jason, May 08 '18 at 03:19
second method is not working `Cannot call method 'onDownloadRequested' of null`! — Mahdi Khalili, Oct 28 '19 at 07:34
@MahdiKhalili Are you sure? Have you executed the project that is in the link at the end of my answer? — eyllanesc, Oct 28 '19 at 07:36
@eyllanesc yeah it runs , but it's not working maybe because i'm using different version of qt ' 5.13.1 ' , i am talking about second method not third one — Mahdi Khalili, Oct 28 '19 at 07:40
@MahdiKhalili mmmm, My project implements all the parts, they are not different solutions but different parts of the same solution. — eyllanesc, Oct 28 '19 at 07:43
@MahdiKhalili I just tested my project with Qt 5.13.1 on Linux and it works correctly. — eyllanesc, Oct 28 '19 at 07:51
@eyllanesc it was building problem , i should've cleaned then built the project , its working now. — Mahdi Khalili, Oct 28 '19 at 08:15
For the second answer, I got an error message while linking: `Unresolved external symbol "public: virtual struct QMetaObject const * __cdecl DownloadHelper::metaObject(void) const`. Could you help me to solve it? — Haozhe Xie, Dec 19 '20 at 13:47

How to popup a file dialog/print dialog in a html file that is rendered in a WebEngineView?

1 Answers1

1.Print preview

2.Download files

3.Navigating to another page