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 lourde en documents en une solution 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 aux navigateurs web compatibles et offre nativement l’annotation, la recherche plein texte (y compris 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 à livrer une expérience documentaire fluide et efficace ? Plongeons‑y.

---

1. Pourquoi un visionneur dédié est essentiel pour les applications Web d’entreprise

Le coût caché du « télécharger‑et‑ouvrir »

• Contexte perdu – les utilisateurs quittent le portail, ouvrent le document dans une fenêtre séparée, puis doivent se rappeler où ils en étaient.
• Rendu incohérent – les visionneuses locales de Word, Excel et CAD peuvent interpréter les fichiers différemment, entraînant des problèmes de mise en page pouvant 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 relecteurs jonglent avec plusieurs outils simplement pour annoter, rechercher ou imprimer, ralentissant les approbations.

Ce dont les développeurs ont réellement besoin

1. Rendre chaque format supporté dans le navigateur (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
2. Exposer une API claire pour les back‑ends .NET et les front‑ends React, Angular ou Vue.
3. Inclure l’annotation, la recherche plein texte (OCR inclus) et l’impression contrôlée sans ajouter de bibliothèques supplémentaires.
4. Scalabilité sécurisée — 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 prises en charge.

2. Configuration du 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 les tuiles de document, les miniatures et les 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 accès au contexte HTTP) dans ConfigureServices. Puis, dans Configure, mappez le point de terminaison Doconut (généralement DocImage.axd) vers le middleware Doconut. Les options du middleware vous permettent d’imposer un rendu sûr 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 habituelle consiste à incorporer la licence comme 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 token

Lorsqu’un utilisateur demande un document, le back‑end ouvre le fichier via l’API de Doconut, en transmettant des paramètres optionnels tels que la protection par mot de passe, la résolution d’image et le délai d’attente. Doconut renvoie un token court (généralement un GUID) qui représente de façon unique le document ouvert. Le front‑end inclut ce token dans chaque requête de tuile, par exemple /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Exposition d’une API sécurisée de flux de documents pour les frameworks JavaScript

Bien que Doconut fournisse déjà un gestionnaire de tuiles bas‑niveau via le middleware, la plupart des équipes préfèrent un contrôleur léger qui ajoute l’authentification, la journalisation et éventuellement le filigrane.

Responsabilités typiques du contrôleur

• Point d’accès d’ouverture – accepte un identifiant de document, résout le chemin physique du fichier, appelle Doconut pour ouvrir le document et renvoie le token généré.
• Point d’accès de vignette – renvoie un petit PNG pour une page donnée, utile pour les barres 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 token dans la session de l’utilisateur ou intégrez‑le dans une revendication JWT à courte durée de vie. Comme le token seul ne permet pas de 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égration du visionneur dans une application React

Les développeurs React peuvent créer un composant fonctionnel qui :

1. Appelle le point de terminaison /open pour récupérer un token pour le document demandé.
2. Construit un tableau d’URL d’images pointant vers le gestionnaire de tuiles Doconut pour chaque page (vous pouvez commencer avec les dix premières pages et charger les suivantes à la demande).
3. Rendu les pages avec des é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 helper JavaScript dans la page. Grâce à ce helper, vous pouvez exécuter des commandes telles que :

• Mettre en évidence un terme – lancer une recherche plein texte dans le document et surligner 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 contenant le numéro de page, le type d’annotation, les coordonnées et les éventuelles données supplémentaires.

Comme le rendu lourd reste côté serveur, le bundle React reste petit et l’interface utilisateur reste réactive.

5. Intégration du 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 vignette). Le service utilise HttpClient pour appeler les points de terminaison du back‑end et renvoie le token sous forme d’observable.

Ensuite, construisez un composant qui, lors de son initialisation, demande le token, génère les URL d’images des pages et les affiche avec *ngFor. Le composant peut exposer des boutons qui appellent le helper JavaScript de Doconut pour l’annotation et la recherche, de la même façon que l’exemple React.

Vue

Dans Vue, définissez un composant qui utilise le hook de cycle de vie created pour demander le token via fetch ou axios. Conservez le token 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, ce qui vous permet de 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 patchwork de plugins tiers ou des 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 constatez à quel point il est rapide de livrer un visionneur élégant de niveau entreprise que vos utilisateurs adoreront.