Afficher un PDF dans une application QML

Version imprimable

11/09/2015, 23h12
Jiyuu

Afficher un PDF dans une application QML

:salut:

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
12/09/2015, 16h27
dourouc05

:salut:

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).
12/09/2015, 23h05
Jiyuu

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 :aie:
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
13/09/2015, 20h56
Jiyuu

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 :mrgreen:
27/09/2015, 11h18
aureyoboss

Bonjour,

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

Bien cordialement.

:salut:

Je peux, je peux ... :mouarf: 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 :

utilisation de poppler-qt5 : je transforme le pdf en QImage que je repeins pour l'utiliser dans QML ;
j'utilise directement pdf.js ;
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:

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:

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:

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:

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:

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:

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

:salut:

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

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

01/10/2015, 11h35
aureyoboss

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

@+
01/10/2015, 12h16
Jiyuu

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ù ;)
01/10/2015, 12h19
aureyoboss

Windows 8.1 x64. Mais, c'est bon... Enfin presque...
J'ai ce message :

Citation:

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.
01/10/2015, 12h24
Jiyuu

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)
01/10/2015, 12h29
aureyoboss

Ok, maintenant j'ai cette erreur :

Citation:

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.