Come gli sviluppatori integrano la visualizzazione di PDF, Office e CAD in app Web .NET, React, Angular o Vue per aumentare la facilità d'uso e l'efficienza: Passo dopo passo

Se stai cercando di trasformare un'applicazione .NET ricca di documenti in qualcosa che gli utenti apprezzino davvero, hai bisogno di un visualizzatore che gestisca PDF, file Word, fogli Excel, presentazioni PowerPoint e disegni CAD—tutto senza costringere gli utenti a scaricare un'app desktop o a fare affidamento su un servizio cloud esterno. È qui che entra in gioco Doconut. Si tratta di un visualizzatore di documenti lato server che trasmette le pagine renderizzate ai browser web supportati e offre annotazione nativa, ricerca full‑text (inclusa OCR) e stampa controllata fin da subito. In questa guida percorreremo l’intero flusso di lavoro: dalla configurazione del motore di conversione di Doconut in un back‑end ASP.NET Core, all’integrazione del visualizzatore in front‑end React, Angular e Vue. Pronto a fornire un’esperienza documentale fluida ed efficiente? Immergiamoci.

Elaborazione di documenti .NET lato server collegata a visualizzatori di documenti in applicazioni React, Angular e Vue

1. Perché un visualizzatore dedicato è importante per le app web aziendali

Il costo nascosto del “scarica‑e‑apri”

La maggior parte dei portali legacy si limita a inserire un collegamento a un file su una condivisione. Cliccandolo il file viene scaricato o aperto da un programma installato localmente. In pratica ciò genera diversi problemi:

Contesto perso – gli utenti lasciano il portale, aprono il documento in una finestra separata e poi devono ricordare dove erano.
Rendering incoerente – i visualizzatori Word, Excel e CAD installati localmente possono interpretare i file in modo diverso, provocando difetti di layout che possono influire su decisioni legali o ingegneristiche.
Rischio di sicurezza – i file escono dal perimetro aziendale, rendendo i tracciamenti di audit e le politiche di prevenzione della perdita di dati un incubo.
Bassa produttività – i revisori devono usare più strumenti solo per annotare, cercare o stampare, rallentando le approvazioni.

Ciò di cui hanno realmente bisogno gli sviluppatori

Una soluzione moderna dovrebbe:

Renderizzare ogni formato supportato nel browser (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
Esporre un’API pulita per back‑end .NET e front‑end React, Angular o Vue.
Includere annotazione, ricerca full‑text (OCR inclusa) e stampa controllata senza dover importare librerie aggiuntive.
Scalare in modo sicuro—elaborare i documenti sul server, trasmetterli come tasselli immagine e non esporre mai i file grezzi al client.

Doconut soddisfa tutti questi requisiti. La sua libreria visualizzatore gira sul server .NET, converte i documenti sorgente in pagine raster su richiesta e serve queste pagine tramite un endpoint HTTP leggero consumato dalle integrazioni front‑end supportate.

2. Configurare il middleware Doconut per la conversione PDF in un’applicazione ASP.NET Core

Il primo passo è registrare il middleware di Doconut affinché il back‑end possa servire tasselli di documento, miniature e dati di annotazione. Questo avviene nella pipeline di richieste di ASP.NET Core e richiede solo un paio di registrazioni di servizio per la cache e il contesto HTTP.

Registrazione del middleware

Aggiungi i servizi richiesti (cache in memoria distribuita e accessor del contesto HTTP) in ConfigureServices. Poi, in Configure, mappa l’endpoint Doconut (tipicamente DocImage.axd) al middleware Doconut. Le opzioni del middleware consentono di imporre un rendering sicuro e di nascondere le diagnostiche interne dagli utenti finali.

Inizializzazione della licenza

Doconut richiede un file di licenza all’avvio. L’approccio più comune è incorporare la licenza come risorsa e caricarla come stream quando l’applicazione parte. Una volta fornito lo stream di licenza all’istanza del visualizzatore Doconut, l’Sdk è completamente attivato e pronto a elaborare i documenti.

Apertura di un documento e ottenimento di un token

Quando un utente richiede un documento, il back‑end apre il file tramite l’API di Doconut, fornendo parametri opzionali come protezione con password, risoluzione immagine e timeout. Doconut restituisce un token breve (di solito un GUID) che rappresenta in modo univoco il documento aperto. Il front‑end include questo token in ogni richiesta di tassello, ad esempio /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Esporre un’API di flusso documento sicura per i framework JavaScript

Sebbene Doconut fornisca già un gestore di tasselli a basso livello tramite middleware, la maggior parte dei team preferisce un controller wrapper leggero che aggiunga autenticazione, logging e watermark opzionale.

Responsabilità tipiche del controller

Endpoint di apertura – Accetta un identificatore documento, risolve il percorso fisico del file, chiama Doconut per aprire il documento e restituisce il token generato.
Endpoint di miniatura – Restituisce un piccolo PNG per una pagina data, utile per le strisce di navigazione. Il controller può semplicemente reindirizzare al gestore di tasselli Doconut con la query string appropriata.

Considerazioni sulla sicurezza

Memorizza il token nella sessione dell’utente o incorporalo in un claim JWT a breve durata. Poiché il token da solo non può recuperare il file originale senza la cache lato server, il documento rimane protetto. La stessa API REST supporta i pattern di integrazione React, Angular e Vue descritti in questa guida.

4. Integrare il visualizzatore in un’applicazione React

Gli sviluppatori React possono creare un componente funzionale che:

Chiama l’endpoint /open per ottenere un token per il documento richiesto.
Costruisce un array di URL immagine che puntano al gestore di tasselli di Doconut per ogni pagina (puoi iniziare con le prime dieci pagine e caricarne altre su richiesta).
Renderizza le pagine come elementi <img>, gestendo eventi di scroll o zoom aggiornando i parametri URL.

Interazione con i punti di integrazione JavaScript di Doconut

Doconut inietta un leggero helper JavaScript nella pagina. Attraverso questo helper è possibile eseguire comandi come:

Evidenziare un termine – richiedi una ricerca full‑text nel documento e evidenzia le parole corrispondenti.
Aggiungere un’annotazione – posiziona una nota adesiva, un timbro o un disegno su una pagina specifica inviando un payload JSON che includa numero di pagina, tipo di annotazione, coordinate e eventuali dati aggiuntivi.

Poiché il lavoro di rendering pesante rimane sul server, il bundle React resta piccolo e l’interfaccia rimane reattiva.

5. Integrare il visualizzatore in Angular e Vue – Modelli di componenti riutilizzabili

Angular

Crea un servizio Angular che rispecchi la piccola API .NET (apri documento, recupera miniatura). Il servizio utilizza HttpClient per chiamare gli endpoint back‑end e restituisce il token come observable.

Quindi costruisci un componente che, all’inizializzazione, richiede il token, costruisce gli URL delle immagini delle pagine e le visualizza con *ngFor. Il componente può esporre pulsanti che chiamano l’helper JavaScript di Doconut per annotazione e ricerca, analogamente all’esempio React.

Vue

In Vue, definisci un componente che utilizzi il hook di ciclo di vita created per richiedere il token tramite fetch o axios. Conserva il token e gli URL delle pagine generate nell’oggetto data del componente. Renderizza le pagine con un ciclo v-for. La reattività di Vue rende semplice aggiornare la vista quando l’utente scorre, zooma o attiva un’azione di annotazione tramite l’integrazione JavaScript di Doconut.

Tutti e tre i framework condividono lo stesso contratto back‑end, quindi è possibile riutilizzare lo stesso controller ASP.NET Core senza modifiche.

Conclusione

Integrare un visualizzatore di documenti completo non richiede più un mosaico di plugin di terze parti o costosi servizi cloud. Con Doconut, gli sviluppatori ottengono una singola libreria lato server che renderizza PDF, file Office e CAD, fornisce annotazione, ricerca potenziata da OCR e stampa controllata—tutto mantenendo i documenti sicuri e scalabili.

Pronto a migliorare l’esperienza documentale nella tua applicazione .NET, React, Angular o Vue? Prova Doconut oggi e scopri quanto rapidamente puoi rilasciare un visualizzatore aziendale di alto livello che i tuoi utenti adoreranno.