Как открыть диалоговое окно файла / диалоговое окно печати в HTML-файл, который отображается в WebEngineView? - PullRequest
Новая
       17

Как открыть диалоговое окно файла / диалоговое окно печати в HTML-файл, который отображается в WebEngineView?

0 голосов
/ 04 мая 2018

У меня есть локальный html-файл, который использует высокие диаграммы для отображения моих данных и сохранения в изображениях, он хорошо работает в браузере Chrome, затем я пытаюсь загрузить его в Qt 5.9.4 с WebEngineView (тип QML), все всплывающие окна диалоги не могут отображаться.

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 Ответ

0 голосов
/ 05 мая 2018

Всплывающие окна имеют 3 типа:

  1. Предварительный просмотр
  2. Загрузка файлов.
  3. Переход на другую страницу

Итак, укажите решение по частям:

1. Предварительный просмотр печати

Похоже, что он до сих пор не реализован в Qt: https://bugreports.qt.io/browse/QTBUG-57982, Обходной путь, предложенный в комментариях к заявкам, состоит в том, чтобы напечатать в PDF, а затем показать этот PDF (например, с pdf.js), который я пробовал. но мне не повезло.

2.Скачать файлы

Этот вопрос похож на предыдущий вопрос , на который я ответил.

Как я уже говорил в моем предыдущем ответе: Это всплывающее окно генерируется браузером, в случае QWebEngine мы должны его создать .

для создания диалога мы можем использовать QML FileDialog, но они не блокируют, поэтому вам придется принять загрузку, и это поведение не такое, как в обычном браузере, поэтому мое решение будет использовать QWidgets QFileDialog с. Позволяет ждать и проверять принятие. Для реализации реализуем помощник, который позволяет нам управлять им. 

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

Полную реализацию можно найти по следующей ссылке .

...