Colorier un texte pdf avec pdf.js

Résolu
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -  
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -
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,
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
            }
        }
    }


0
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
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,
0
rasielblas Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   9
 
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! :-)
0