Comment les développeurs intègrent la visualisation PDF, Office et CAD dans les applications Web .NET, React, Angular ou Vue pour améliorer la convivialité et l'efficacité : étape par étape
Si vous essayez de transformer une application .NET très axée sur les documents en quelque chose que les utilisateurs apprécient réellement, vous avez besoin d’un visionneur capable de gérer les PDF, les fichiers Word, les feuilles Excel, les présentations PowerPoint et les dessins CAD — le tout sans obliger les utilisateurs à télécharger une application de bureau ou à dépendre d’un service cloud externe. C’est là que Doconut intervient. Il s’agit d’un visionneur de documents côté serveur qui diffuse les pages rendues vers les navigateurs web compatibles et offre l’annotation native, la recherche en texte intégral (y compris l’OCR) et l’impression contrôlée dès le départ. Dans ce guide, nous parcourrons l’ensemble du flux de travail : de la configuration du moteur de conversion de Doconut dans un back‑end ASP.NET Core, à l’intégration du visionneur dans les front‑ends React, Angular et Vue. Prêt à déployer une expérience documentaire fluide et efficace ? Plongeons‑y.
1. Pourquoi un visionneur dédié est important pour les applications Web d’entreprise
Le coût caché du « télécharger‑et‑ouvrir »
La plupart des portails hérités se contentent de déposer un lien vers un fichier partagé. Cliquer dessus télécharge le fichier ou le transmet à un programme installé localement. En pratique, cela engendre plusieurs problèmes :
- Contexte perdu – les utilisateurs quittent le portail, ouvrent le document dans une fenêtre séparée, puis doivent se souvenir où ils en étaient.
- Rendu incohérent – les visionneurs Word, Excel et CAD installés localement peuvent interpréter les fichiers différemment, entraînant des anomalies de mise en page qui peuvent affecter des décisions juridiques ou d’ingénierie.
- Risque de sécurité – les fichiers sortent du périmètre de l’entreprise, rendant les pistes d’audit et les politiques de prévention de perte de données cauchemardesques.
- Faible productivité – les réviseurs jonglent avec plusieurs outils simplement pour annoter, rechercher ou imprimer, ralentissant les approbations.
Ce dont les développeurs ont réellement besoin
Une solution moderne devrait :
- Rendre chaque format supporté dans le navigateur (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- Exposer une API claire pour les back‑ends .NET et les front‑ends React, Angular ou Vue.
- Inclure l’annotation, la recherche en texte intégral (OCR inclus) et l’impression contrôlée sans ajouter de bibliothèques supplémentaires.
- S’échelonner en toute sécurité — traiter les documents sur le serveur, les diffuser sous forme de tuiles d’image, et ne jamais exposer les fichiers bruts au client.
Doconut coche toutes ces cases. Sa bibliothèque de visionneur s’exécute sur le serveur .NET, convertit les documents sources en pages raster à la demande, et sert ces pages via un point de terminaison HTTP léger consommé par les intégrations front‑end supportées.
2. Configurer le middleware Doconut pour la conversion PDF dans une application ASP.NET Core
La première étape consiste à enregistrer le middleware de Doconut afin que le back‑end puisse fournir des tuiles de documents, des miniatures et des données d’annotation. Cela se fait dans le pipeline de requêtes ASP.NET Core et ne nécessite que quelques enregistrements de services pour le cache et le contexte de requête.
Enregistrement du middleware
Ajoutez les services requis (cache mémoire distribué et accessor de contexte HTTP) dans ConfigureServices. Ensuite, dans Configure, mappez le point de terminaison Doconut (généralement DocImage.axd) au middleware Doconut. Les options du middleware vous permettent d’imposer un rendu sécurisé et de masquer les diagnostics internes aux utilisateurs finaux.
Initialisation de la licence
Doconut nécessite un fichier de licence au démarrage. L’approche typique consiste à intégrer la licence en tant que ressource et à la charger sous forme de flux lorsque l’application démarre. Une fois le flux de licence fourni à l’instance du visionneur Doconut, le SDK est entièrement activé et prêt à traiter les documents.
Ouverture d’un document et obtention d’un jeton
Lorsqu’un utilisateur demande un document, le back‑end ouvre le fichier via l’API de Doconut, en fournissant des paramètres optionnels tels que la protection par mot de passe, la résolution d’image et un délai d’expiration. Doconut renvoie un jeton court (généralement un GUID) qui représente de manière unique le document ouvert. Le front‑end inclut ce jeton dans chaque requête de tuile, par exemple /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. Exposer une API sécurisée de flux de documents pour les frameworks JavaScript
Bien que Doconut fournisse déjà un gestionnaire de tuiles de bas niveau via le middleware, la plupart des équipes préfèrent un contrôleur léger qui ajoute l’authentification, la journalisation et le filigrane optionnel.
Responsabilités typiques du contrôleur
- Point de terminaison d’ouverture – Accepte un identifiant de document, résout le chemin physique du fichier, appelle Doconut pour ouvrir le document et renvoie le jeton généré.
- Point de terminaison de miniature – Retourne un petit PNG pour une page donnée, utile pour les bandes de navigation. Le contrôleur peut simplement rediriger vers le gestionnaire de tuiles Doconut avec la chaîne de requête appropriée.
Considérations de sécurité
Stockez le jeton dans la session de l’utilisateur ou intégrez‑le dans une revendication JWT à courte durée de vie. Comme le jeton seul ne peut pas récupérer le fichier original sans le cache côté serveur, le document reste protégé. La même API REST prend en charge les modèles d’intégration React, Angular et Vue décrits dans ce guide.
4. Intégrer le visionneur dans une application React
Les développeurs React peuvent créer un composant fonctionnel qui :
- Appelle le point de terminaison
/openpour récupérer un jeton pour le document demandé. - Construit un tableau d’URL d’images pointant vers le gestionnaire de tuiles de Doconut pour chaque page (vous pouvez commencer avec les dix premières pages et charger davantage à la demande).
- Rend les pages sous forme d’éléments
<img>, en gérant les événements de défilement ou de zoom en mettant à jour les paramètres de l’URL.
Interaction avec les points d’intégration JavaScript de Doconut
Doconut injecte un petit assistant JavaScript dans la page. Grâce à cet assistant, vous pouvez émettre des commandes telles que :
- Mettre en évidence un terme – demander une recherche en texte intégral dans le document et mettre en surbrillance les mots correspondants.
- Ajouter une annotation – placer une note autocollante, un tampon ou un dessin sur une page spécifique en envoyant une charge JSON incluant le numéro de page, le type d’annotation, les coordonnées et toute donnée supplémentaire.
Comme le travail de rendu lourd reste sur le serveur, le bundle React reste petit et l’interface reste réactive.
5. Intégrer le visionneur dans Angular et Vue – Modèles de composants réutilisables
Angular
Créez un service Angular qui reflète la petite API .NET (ouverture de document, récupération de miniature). Le service utilise HttpClient pour appeler les points de terminaison du back‑end et renvoie le jeton sous forme d’observable.
Ensuite, construisez un composant qui, lors de l’initialisation, demande le jeton, construit les URL d’images de pages et les affiche avec *ngFor. Le composant peut exposer des boutons qui appellent l’assistant JavaScript de Doconut pour l’annotation et la recherche, similaire à l’exemple React.
Vue
Dans Vue, définissez un composant qui utilise le hook de cycle de vie created pour demander le jeton via fetch ou axios. Stockez le jeton et les URL de pages générées dans l’objet data du composant. Rendu les pages avec une boucle v-for. La réactivité de Vue facilite la mise à jour de la vue lorsque l’utilisateur fait défiler, zoome ou déclenche une action d’annotation via l’intégration JavaScript de Doconut.
Les trois frameworks partagent le même contrat back‑end, vous pouvez donc réutiliser le même contrôleur ASP.NET Core sans modification.
Conclusion
Intégrer un visionneur de documents complet ne nécessite plus un mosaïque de plugins tiers ou de services cloud coûteux. Avec Doconut, les développeurs obtiennent une bibliothèque unique côté serveur qui rend les fichiers PDF, Office et CAD, fournit l’annotation, la recherche alimentée par OCR et l’impression contrôlée — tout en maintenant les documents sécurisés et évolutifs.
Prêt à améliorer l’expérience documentaire dans votre application .NET, React, Angular ou Vue ? Essayez Doconut dès aujourd’hui et voyez à quelle vitesse vous pouvez déployer un visionneur élégant de niveau entreprise que vos utilisateurs adoreront.