Documents
Ouvrir un PDF dans la page : toutes ses pages, le zoom, la recherche, l’impression, le plein écran — pdf.js, servi par l’application, hors ligne compris.
Le moteur est pdf.js, chargé à la demande à travers react-pdf et servi par l’application sous /pdfjs/<version>/ — worker, décodeurs WebAssembly et polices, gardés en cache par le service worker. Ouvrez l’onglet Réseau : rien ne vient d’un CDN.
La visionneuse
Toutes les pages dans une colonne qui défile, la page courante suivie au défilement, le zoom par paliers. Seules les pages proches de l’écran sont dessinées : les autres gardent un espace blanc de leur taille. Les vignettes, la recherche (sans souci de casse ni d’accents, Entrée pour l’occurrence suivante), la rotation ; imprimer depuis la page, à 150 dpi, ou ouvrir le document dans un onglet ; plein écran couvre la fenêtre de l’application avec la visionneuse. Au clavier, la visionneuse ayant le focus : Page précédente / suivante, Début / Fin, + / −, r, Ctrl+F.
Couche texte : pdf.js dessine la page en image, puis pose par-dessus une couche de texte invisible, au même endroit que dans l’image — c’est elle qui rend le texte sélectionnable, copiable et lisible par un lecteur d’écran. Essayez de sélectionner le texte de la page avec et sans. Sans, le rendu est un peu plus léger : un PDF scanné n’en a pas besoin.
Dans un panneau
PdfPanel : la visionneuse dans un panneau latéral sur ordinateur, plein écran sous sm. Il s’ouvre comme toute modale, prend les props de la visionneuse, et un footerNode épingle les actions de l’application sous le document.
Un PDF déposé
Un fichier déposé ou choisi s’ouvre tel quel : la visionneuse prend un File comme une adresse. Rien ne part sur le réseau. La croix de la liste le retire ; déposez-en un autre pour le remplacer.
Déposez un PDF ci-dessus pour l’ouvrir ici.
Quarante pages
Faites défiler : les pages se dessinent à l’approche et se libèrent en s’éloignant. Le compteur dit combien sont dessinées à cet instant. Essayez les vignettes et la recherche (« line 12 », par exemple).
0 page(s) dessinée(s) sur 0Un PDF derrière une API
La route /api/documents/sample du lab n’envoie le document qu’avec l’en-tête Authorization. La visionneuse reçoit { url , headers } : pdf.js envoie l’en-tête lui-même et garde ses requêtes par plages. Sans l’en-tête, la route répond 401 et la visionneuse le dit, et la page le toaste par onError — en développement, react-pdf répète aussi l’erreur dans la console.
Un PDF protégé
Le document demande son mot de passe avant de s’ouvrir, et le redemande s’il est faux. Celui-ci : « oihana ».