Menu

Colorier un texte pdf avec pdf.js [Résolu]

Messages postés
43
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
17 avril 2019
-
Bonjour,

Le PDF.js ou pdf.js est une bibliothèque JavaScript permettant de restituer des fichiers au format de document portable à l'aide du canevas HTML5 conforme aux normes Web selon wikipedia.

Don j'ai utilisé ce bibliothèque dans le but de récupérer le texte sur pdf et puis de le sélectionner. Voici un exemple:

https://mozilla.github.io/pdf.js/web/viewer.html

Mais à ce que je vois, il n'y a aucun tutoriel qui permet de traiter le texte sur ce bibliothèque alors j'ai fait appel à vous.

Ce que j'aimerais faire c'est de créer un boutton qui permet de colorié chaque texte sélectionner comme sur office Word mais cette fois avec la librairie pdfjs:



J'aimerais solliciter votre aide si vous pouvez m'aider s'il vous plaît car c'est une sujet assez complexe, mais j'en ai besoin pour l'intégrer dans mon application.

Cordialement,
Afficher la suite 

Votre réponse

1 réponse

Messages postés
25229
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 avril 2019
1949
0
Merci
Bonjour,
visiblement, le script génère un SPAN pour chaque mot

Donc peu importe que tu sois passé par pdf.js ou que tu aies écrit le texte à la main... pour le coup, tu dois juste modifier le style du span concerné pour y mettre la couleur désirée.

un truc du genre
var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
                parentEl.color = "red" //par exemple
            }
        }
    }


rasielblas
Messages postés
43
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
17 avril 2019
-
Merci, votre code m'as bien fait progresser cependant j'ai un autre souci! en utilisant votre code j'ai un peu modifié comme ceci pour mon besoin:

var parentEl = null, sel;
            if (window.getSelection) {
                sel = window.getSelection();
                if (sel.rangeCount) {
                    parentEl = sel.getRangeAt(0).commonAncestorContainer;
                    if (parentEl.nodeType) {
                        parentEl = parentEl.parentNode;
                            console.log(parentEl);
                        parentEl.color = "green"; 
                        
                    }
                }
            }


Est j'ai eu comme résultat:



Comme vous le voyez sur cette image, en mode console j'ai eu un attributes:NamedNodeMap avec un css et j'aimerais insérer un background="red" dans ce cette attribut, quand j'ai essayer d'insérer le style avec: parentEl.style="background:red" cela a écraser tous les styles css déjà existant et a déplacer le texte colorié, voici le résultat:



Ce que je veux donc c'est d'insérer un nouveau style dans l'attributes:NamedNodeMap sans toucher au style déjà existant dans cette attributes.

Voici le résultat que j'aimerais avoir:



Cordialement,
rasielblas
Messages postés
43
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
17 avril 2019
-
J'ai trouvé! il suffit d'ajouter un éléments par l'objet add

var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );


Merci beaucoup! :-)
Commenter la réponse de jordane45