Qt小例子学习59 - WebEngineView 加载qml显示图表

Qt小例子学习59 - WebEngineView 加载qml显示图表

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtWebEngine 1.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

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

        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)
        }
    }
}

main.cpp

#include <QApplication>
#include <QFileDialog>
#include <QQmlApplicationEngine>
#include <QQmlEngine>
#include <QtWebEngine>

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

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);
    QtWebEngine::initialize();

    QQmlApplicationEngine engine;
    DownloadHelper helper;
    engine.rootContext()->setContextProperty("downloadHelper", &helper);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

#include "main.moc"

index.html

<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>