Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Qt Quick Discussion :

Afficher un PDF dans une application QML


Sujet :

Qt Quick

  1. #1
    Rédacteur/Modérateur

    Afficher un PDF dans une application QML


    Je souhaite afficher un PDF dans mon application créée en QML. L'idée est d'avoir sur une même fenêtre d'un coté les principales caractéristiques d'une machine et de l'autre sa notice, le tout en QML.
    J'ai pensé utiliser un WebView, mais ce composant ne semble pas lire les PDF.

    Auriez-vous une idée pour faire ceci ?

    Merci à tous et bonne nuit.

    J
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  2. #2
    Responsable Qt & Livres



    Et si tu utilises pdf.js https://mozilla.github.io/pdf.js/ dans ton WebView ? Ce composant fonctionne raisonnablement bien pour des documents pas trop compliqués ni trop longs. Peut-être aussi récupérer Poppler côté QML (https://github.com/dept2/Poppler-QML-plugin, même si ça n'a pas l'air très maintenu).
    Vous souhaitez participer aux rubriques Qt (tutoriels, FAQ, traductions) ou HPC ? Contactez-moi par MP.

    Créer des applications graphiques en Python avec PyQt5
    Créer des applications avec Qt 5.

    Pas de question d'ordre technique par MP !

  3. #3
    Rédacteur/Modérateur

    Hello,

    pdf.js, je ne connaissais pas. Par contre l'idée d'utiliser poppler m'est venu aujourd'hui. J'ai essayé pdftohtml, mais les pdf que j'ai à transcrire doit pas être simple... je me retrouve avec uniquement des hiéroglyphes
    Par contre la commande pdftocairo fonctionne parfaitement, j'aurai juste à gérer dans mon appli le nombre de pages générées.

    Je vais continuer à investiguer dans ce sens.

    @+ & merci
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  4. #4
    Rédacteur/Modérateur

    Mon premier essai n'a pas été concluant car j'étais encore avec QtWebKit... avec QtWebEngine pdf.js fonctionne correctement avec les premiers pdf testés...

    Impec
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  5. #5
    Membre à l'essai
    Bonjour,

    Jiyuu, est-ce que tu pourrais me montrer ton exemple car je cherche à faire la même chose.

    Bien cordialement.

  6. #6
    Rédacteur/Modérateur



    Je peux, je peux ... En fait je dirais même que j'avais prévu de le faire car j'ai retenu 3 solutions et dans les 3 cas je ne suis pas satisfait du résultat... un avis extérieur serait donc au top
    Voici où j'en suis :
    1. utilisation de poppler-qt5 : je transforme le pdf en QImage que je repeins pour l'utiliser dans QML ;
    2. j'utilise directement pdf.js ;
    3. j'utilise pdf.js en passant par le fichier viewer.html fourni avec.


    Principaux soucis actuels par solution :

    Poppler :
    • qualité de l'image repeinte médiocre ;
    • licence GPL.

    pdf.js + fichier HTML:
    • actuellement tout est codé en dur dans le fichier HTML, ce qui nécessiterait de créer coté C++ le fichier HTML qui va bien avant de le charger afin d'afficher dynamiquement un PDF.

    pdf.js via view.html :
    • seul les fichiers présents dans les ressources (fichier qrc) sont affichable, donc coté dynamique c'est pas top.



    Voici les principaux codes nécessaires :

    main.cpp
    Code qt :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #include <QApplication>
    #include <QQmlApplicationEngine>
    #include <QQmlContext>
    #include <QtWebEngine/qtwebengineglobal.h>
    #include "viewer.h"
     
     
    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);
        QtWebEngine::initialize();
     
        qmlRegisterType<Viewer>("ViewerPDF", 1, 0, "Pdf");
     
     
        QQmlApplicationEngine engine;
        engine.rootContext()->setContextProperty("app", &app);
        engine.rootContext()->setContextProperty("QT_VERSION_STR", QT_VERSION_STR);
     
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
     
        return app.exec();
    }


    viewer.cpp (pour poppler)
    Code qt :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    #include "viewer.h"
     
    Viewer::Viewer(QQuickPaintedItem *parent) : QQuickPaintedItem(parent)
    {
     
    }
     
    void Viewer::paint(QPainter *painter){
        QImage img = pdftohtml("/home/charlie/Documents/FT4.pdf");
        painter->drawImage(0, 0, img);
     
    }
     
    QImage Viewer::pdftohtml(QString file){
        Poppler:<img src="images/smilies/icon_biggrin.gif" border="0" alt="" title=":D" class="inlineimg" />ocument* document = Poppler:<img src="images/smilies/icon_biggrin.gif" border="0" alt="" title=":D" class="inlineimg" />ocument::load(file);
        if (!document || document->isLocked()) {
          qDebug() << "Erreur lors de l'ouverture du fichier";
          delete document;
        }
     
        Poppler:<img src="images/smilies/icon_razz.gif" border="0" alt="" title=":P" class="inlineimg" />age* pdfPage = document->page(0); 
     
        QImage image = pdfPage->renderToImage(240.0, 240.0);
     
        delete pdfPage;
     
        delete document;
     
        return image;
    }


    viewer.h
    Code qt :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    #ifndef VIEWER_H
    #define VIEWER_H
     
    #include <QImage>
    #include <QString>
    #include <QDebug>
    #include <poppler/qt5/poppler-qt5.h>
    #include <QQuickPaintedItem>
    #include <QPainter>
     
     
     
    class Viewer : public QQuickPaintedItem
    {
        Q_OBJECT
    public:
        explicit Viewer(QQuickPaintedItem *parent = 0);
        void paint(QPainter *painter);
     
    signals:
     
    public slots:
        QImage pdftohtml(QString file);
    };
     
    #endif // VIEWER_H


    main.qml
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtWebEngine 1.0
    import ViewerPDF 1.0
     
    ApplicationWindow {
        visible: true
        width: maximumWidth
        height: maximumHeight
        title: qsTr("Hello World")
     
        menuBar: MenuBar {
            Menu {
                title: qsTr("File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: console.log("Open action triggered");
                }
                MenuItem {
                    text: qsTr("Exit")
                    onTriggered: Qt.quit();
                }
            }
        }
     
        RowLayout {
            anchors.fill: parent
     
            ColumnLayout {
                Layout.fillHeight: true
                Layout.fillWidth: true
     
                Label {
                    text: "PDF by Poppler-qt5"
                    Layout.fillWidth: true
                }
     
                Pdf {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
     
                }
            }
            ColumnLayout {
                Layout.fillHeight: true
                Layout.fillWidth: true
     
                Label {
                    text: "PDF by pdf.js"
                    Layout.fillWidth: true
                }
     
                WebEngineView {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    url: "qrc:/main.html"
                }
            }
            ColumnLayout {
                Layout.fillHeight: true
                Layout.fillWidth: true
     
                Label {
                    text: "PDF by view.html of pdf.js"
                    Layout.fillWidth: true
                }
     
                WebEngineView {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    url: "qrc:/pdfjs/web/viewer.html?file=qrc:/02-interaction-qml-python.pdf"
                }
            }
        }
    }


    main.html
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!doctype html>
    <html>
     
    <head>
      <script src="pdf.js"></script>
      <script src="script.js"></script>
     
    </head>
     
    <body>
      <canvas id="the-canvas" style="border:1px solid black;"/>
    </body>
     
    </html>


    script.js
    Code js :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /* SOLUTION N°1 */
    var numPage = 1;
    var totalPage = null;
    var oPdf = PDFJS.getDocument("02-interaction-qml-python.pdf");
    oPdf.then(renderPDF);
     
    function renderPDF(pdf){
        if (totalPage == null){
            pdf.getPage(numPage).then(renderPage);
            numPage++;
        }
        if (numPage <= totalPage){
            pdf.getPage(numPage).then(renderPage);
            numPage++;
     
            setTimeout("renderPDF(pdf)", 3000);
        }
    }
     
    function renderPage(page){
        var scale = 1.5;
        var viewport = page.getViewport(scale)
        var canvas = document.getElementById("the-canvas")
        var context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    }



    Les trucs sympas à réussir :
    • améliorer la qualité avec poppler, mais la licence restera GPL ... ;
    • réussir à utiliser pdf.js directement dans QML sans passer par un HTML ... c'est à dire créer dans un Canvas QML ce que l'on créé dans un Canvas HTML ;
    • utiliser l'URL absolu du fichier avec le viewer.html (restera à modifier le model pour enlever quelques options dans mon cas).



    Toute idée est la bienvenue
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  7. #7
    Rédacteur/Modérateur



    En ce qui concerne la solution avec le viewer de pdf.js, j'ai opté finalement pour la solution suivante :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import QtQuick 2.5
    import QtWebEngine 1.0
     
    Item {
        property string viewer  // chemin absolu vers le viewer de pdf.js
        property string pdf       // chemin absolu vers le pdf à afficher.
        WebEngineView {
            id: webview
            anchors.fill: parent
            url: viewer + "?file=" + pdf
        }
    }


    Tout simplement.

    Je vais continuer à travailler sur les deux autres méthodes et je tâcherai de proposer des solutions rapidement. Lors d'un autre topic j'ai aussi été mis sur la piste du stockage du PDF directement dans ma BDD et le relire par la suite (QByteArray ???). J'essayerai aussi d'avancer là dessus.

    @+



    J
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  8. #8
    Membre à l'essai
    Salut !

    Je vais attendre ton futur topics, car il me faut une solution pour que cela soit dynamique et depuis QtQuick.
    Pour ta dernière solution, cela plante chez moi : (Qt5Cored.dll - Qt_5_5_0_MSVC2013_32bit-debug). En release - la fenêtre se ferme immédiatement...

    @+

  9. #9
    Rédacteur/Modérateur

    Tu es sous quelle version de Windows ? Ça n'a peut-être rien à voir mais il me semble avoir lu quelque part que MSVC2013 fonctionnait assez mal avec Win 10. Je suis pas sous windows, donc j'y connais quasi rien, mais au cas où
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  10. #10
    Membre à l'essai
    Windows 8.1 x64. Mais, c'est bon... Enfin presque...
    J'ai ce message :


    Page Web inaccessible

    Masquer les détails
    Il se peut que la page Web à l'adresse qrc:/build/pdj.js?file=http://mai.kvk.uni-obuda.hu/documents/tantargy/i8088.pdf soit temporairement inaccessible ou qu'elle ait été déplacée de façon permanente à une autre adresse Web.
    Code d'erreur : ERR_INVALID_URL.

  11. #11
    Rédacteur/Modérateur

    Tu as ce message car tu passes par qrc.
    Dans mon dernier exemple je ne travaille qu'avec des chemin absolu.

    Ça implique de distribuer pdf.js à part et de savoir où il se trouve. Mais ce n'est qu'ainsi que j'ai réussi a faire ce que je voulais.

    Et c'est la visionneuse qu'il faut prendre (pdfjs/web/viewer.html)
    Initiation à Qt Quick et QML : Partie 1 - Partie 2
    En cas de besoin, pensez à la
    Mon site et mes tutoriaux sur Developpez.com
    Pas de question technique par MP... Les forums sont là pour ça

  12. #12
    Membre à l'essai
    Ok, maintenant j'ai cette erreur :


    PDF.js v1.1.366 (identifiant de compilation*: 9e9df56)
    Message*: Unexpected server response (0) while retrieving PDF "http://mai.kvk.uni-obuda.hu/documents/tantargy/i8088.pdf".
    C'est parce que ce n'est pas un chemin absolu ?
    Sinon, vous n'avez pas une idée pour désactiver le clique-droit avec la liste (Back - Forward - Reload) de la WebEngine ?

    Merci.

###raw>template_hook.ano_emploi###