Colorier un texte pdf avec pdf.js

Résolu/Fermé

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - Modifié le 6 avril 2019 à 10:14
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 12 avril 2019 à 09:54

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:

Colorier un texte pdf avec pdf.js
Lire le coran en français pdf - Télécharger - Histoire & Religion
Comment modifier un pdf - Guide
Comment faire un pdf - Guide
Comment réduire la taille d'un pdf - Guide
Copier texte pdf - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 647
6 avril 2019 à 12:26

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 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
Modifié le 8 avril 2019 à 16:08

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 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
12 avril 2019 à 09:54

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! :-)

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Discussions similaires

Newsletters