如何在 WebEngineView 中呈现的 html 文件中弹出文件对话框/打印对话框？

Posted 2023-03-30

【中文标题】如何在 WebEngineView 中呈现的 html 文件中弹出文件对话框/打印对话框？

【英文标题】：How to popup a file dialog/print dialog in a html file that is rendered in a WebEngineView?

【发布时间】：2018-05-04 18:18:04

【问题描述】：

我有一个本地 html 文件，它使用 highcharts 显示我的数据并保存到图像，它在 chrome 浏览器中运行良好，然后我尝试使用 WebEngineView（QML 类型）在 Qt 5.9.4 中加载它，所有弹出窗口对话框无法显示。

html文件代码：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 文件：

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

如何让WebEngineView显示文件对话框、打印对话框等对话框

【参考方案1】：

弹出窗口有 3 种类型：

打印预览 下载文件。 导航到另一个页面

所以分部分指出解决方案：

1.打印预览

它似乎仍然没有在 Qt 中实现：https://bugreports.qt.io/browse/QTBUG-57982，票证中建议的解决方法是用 PDF 打印，然后显示该 PDF（例如，使用 pdf.js），我已经尝试过了，但是我没有运气。

2.下载文件

这个问题类似于我回答的previous question。

正如我在之前的回答中所说：该弹出窗口是由浏览器生成的，对于QWebEngine，我们必须创建它。

要创建对话框，我们可以使用 QML FileDialog，但这些不会阻塞，因此您必须接受下载，并且该行为不是在传统浏览器中看到的，因此我的解决方案将使用 QWidgets @ 987654326@ since 允许等待并能够验证接受。对于实现，请实现一个允许我们管理它的助手。

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.导航到另一个页面

当“在 HighCharts Cloud 中打开” 菜单被按下时，它会发起一个打开新窗口的请求，为了使用它，我们使用 newViewRequested 信号动态创建一个窗口：

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
                                                WebEngineViewid:wv; anchors.fill: parent',
                                           webView,
                                           "dynamicSnippet1");
        console.log(newWindow.wv)
        request.openIn(newWindow.wv)
    

_{完整的实现可以在下面的link找到。}

【讨论】：

太棒了！非常感谢！

还有一个问题。它在调试模式下工作，对话框可以正常打开，但在发布模式下没有文件下载。你发现这个问题了吗？

Q_ASSERT，就是这个问题

完整的实现链接不正确，能分享一下吗？

第二种方法不起作用Cannot call method 'onDownloadRequested' of null!