Discussion :

[Jiyuu]

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

[dourouc05]

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

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

[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

[aureyoboss]

Bonjour,

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

Bien cordialement.

[Jiyuu]

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