IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut 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


    Avatar de dourouc05
    Homme Profil pro
    Ingénieur de recherche
    Inscrit en
    août 2008
    Messages
    26 112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur de recherche
    Secteur : Enseignement

    Informations forums :
    Inscription : août 2008
    Messages : 26 112
    Points : 185 843
    Points
    185 843
    Par défaut


    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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut
    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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut
    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
    Homme Profil pro
    Ressources humaines
    Inscrit en
    janvier 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : janvier 2014
    Messages : 19
    Points : 22
    Points
    22
    Par défaut
    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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut


    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::Document* document = Poppler::Document::load(file);
        if (!document || document->isLocked()) {
          qDebug() << "Erreur lors de l'ouverture du fichier";
          delete document;
        }
     
        Poppler::Page* 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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut


    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
    Homme Profil pro
    Ressources humaines
    Inscrit en
    janvier 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : janvier 2014
    Messages : 19
    Points : 22
    Points
    22
    Par défaut
    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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut
    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
    Homme Profil pro
    Ressources humaines
    Inscrit en
    janvier 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : janvier 2014
    Messages : 19
    Points : 22
    Points
    22
    Par défaut
    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

    Avatar de Jiyuu
    Homme Profil pro
    Développeur amateur
    Inscrit en
    janvier 2007
    Messages
    2 456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur amateur
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2007
    Messages : 2 456
    Points : 6 786
    Points
    6 786
    Billets dans le blog
    15
    Par défaut
    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
    Homme Profil pro
    Ressources humaines
    Inscrit en
    janvier 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : janvier 2014
    Messages : 19
    Points : 22
    Points
    22
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher un PDF dans une application
    Par Benoit* dans le forum Android
    Réponses: 13
    Dernier message: 28/01/2013, 04h45
  2. Réponses: 4
    Dernier message: 08/08/2006, 20h57
  3. [PDF] Afficher un pdf dans une page web
    Par hutchuck dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 16/01/2006, 12h21
  4. Comment afficher des JPEG dans une application Delphi ?
    Par Bouguennec dans le forum Composants VCL
    Réponses: 4
    Dernier message: 17/09/2005, 22h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo