Πώς οι Προγραμματιστές Ενσωματώνουν την Προβολή PDF, Office και CAD σε Εφαρμογές Web .NET, React, Angular ή Vue για Αύξηση Φιλικότητας προς τον Χρήστη και Αποδοτικότητας: Βήμα προς Βήμα

Αν προσπαθείτε να μετατρέψετε μια εφαρμογή .NET γεμάτη έγγραφα σε κάτι που οι χρήστες πραγματικά απολαμβάνουν, χρειάζεστε έναν προβολέα που να διαχειρίζεται PDF, αρχεία Word, φύλλα Excel, παρουσιάσεις PowerPoint και σχέδια CAD—όλα χωρίς να αναγκάζετε τους χρήστες να κατεβάσουν μια εφαρμογή για επιφάνεια εργασίας ή να βασιστούν σε εξωτερική υπηρεσία cloud. Εδώ έρχεται το Doconut. Είναι ένας προβολέας εγγράφων στο διακομιστή που μεταδίδει τις αποδομένες σελίδες σε υποστηριζόμενα προγράμματα περιήγησης και παρέχει εγγενή σχολιασμό, αναζήτηση πλήρους κειμένου (συμπεριλαμβανομένου OCR) και ελεγχόμενη εκτύπωση έτοιμη για χρήση. Σε αυτόν τον οδηγό θα περάσουμε από όλη τη ροή εργασίας: από τη ρύθμιση της μηχανής μετατροπής της Doconut σε ένα backend ASP.NET Core, μέχρι την ενσωμάτωση του προβολέα σε front‑ends React, Angular και Vue. Έτοιμοι να προσφέρετε μια ομαλή, αποδοτική εμπειρία εγγράφων; Ας ξεκινήσουμε.

Επεξεργασία εγγράφων .NET στο διακομιστή συνδεδεμένη με προβολείς εγγράφων σε εφαρμογές React, Angular και Vue

1. Γιατί ένας Αφοσιωμένος Προβολέας Είναι Σημαντικός για Επιχειρησιακές Εφαρμογές Web

Το κρυφό κόστος του «κατέβασε‑και‑άνοιξε»

Τα περισσότερα παλιά portals απλώς τοποθετούν έναν σύνδεσμο σε ένα αρχείο σε ένα κοινόχρηστο χώρο. Κάνοντας κλικ, το αρχείο είτε κατεβάζεται είτε παραδίδεται σε ένα τοπικά εγκατεστημένο πρόγραμμα. Στην πράξη αυτό δημιουργεί πολλά προβλήματα:

Απώλεια πλαισίου – οι χρήστες αφήνουν το portal, ανοίγουν το έγγραφο σε ξεχωριστό παράθυρο και πρέπει να θυμηθούν πού βρίσκονταν.
Ασυνεπής απόδοση – οι τοπικά εγκατεστημένοι προβολείς Word, Excel και CAD μπορούν να ερμηνεύσουν τα αρχεία διαφορετικά, οδηγώντας σε σφάλματα διάταξης που μπορεί να επηρεάσουν νομικές ή μηχανικές αποφάσεις.
Κίνδυνος ασφαλείας – τα αρχεία βγαίνουν εκτός του εταιρικού περιγράμματος, καθιστώντας τις αλυσίδες ελέγχου και τις πολιτικές πρόληψης απώλειας δεδομένων εφιαλτικές.
Χαμηλή παραγωγικότητα – οι αξιολογητές πρέπει να χειρίζονται πολλαπλά εργαλεία μόνο για να σχολιάσουν, να αναζητήσουν ή να εκτυπώσουν, επιβραδύνοντας τις εγκρίσεις.

Τι χρειάζονται πραγματικά οι προγραμματιστές

Μια σύγχρονη λύση πρέπει:

Να αποδίδει κάθε υποστηριζόμενη μορφή στο πρόγραμμα περιήγησης (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
Να εκθέτει ένα καθαρό API για back‑ends .NET και front‑ends React, Angular ή Vue.
Να περιλαμβάνει σχολιασμό, αναζήτηση πλήρους κειμένου (με OCR) και ελεγχόμενη εκτύπωση χωρίς την ανάγκη πρόσθετων βιβλιοθηκών.
Να κλιμακώνεται με ασφάλεια—να επεξεργάζεται τα έγγραφα στον διακομιστή, να τα μεταδίδει ως πλακίδια εικόνας και να μην εκθέτει ποτέ τα ακατέργαστα αρχεία στον πελάτη.

Doconut καλύπτει όλα αυτά τα κριτήρια. Η βιβλιοθήκη προβολέα του τρέχει στον διακομιστή .NET, μετατρέπει τα πηγαία έγγραφα σε ραστερ σελίδες κατά απαίτηση και σερβίρει αυτές τις σελίδες μέσω ενός ελαφρού endpoint HTTP που καταναλώνεται από τις υποστηριζόμενες ενσωματώσεις front‑end.

2. Ρύθμιση του Middleware Doconut για Μετατροπή PDF σε Εφαρμογή ASP.NET Core

Το πρώτο βήμα είναι να καταχωρίσετε το middleware της Doconut ώστε το back‑end να μπορεί να σερβίρει πλακίδια εγγράφων, μικρογραφίες και δεδομένα σχολιασμού. Αυτό γίνεται στην αλυσίδα αιτήσεων του ASP.NET Core και απαιτεί μόνο μερικές εγγραφές υπηρεσιών για caching και context αιτήματος.

Καταχώριση του middleware

Προσθέστε τις απαιτούμενες υπηρεσίες (distributed memory cache και HTTP context accessor) στο ConfigureServices. Στη συνέχεια, στο Configure, αντιστοιχίστε το endpoint της Doconut (συνήθως DocImage.axd) στο middleware της Doconut. Οι επιλογές του middleware σας επιτρέπουν να επιβάλετε ασφαλή απόδοση και να κρύψετε εσωτερικές διαγνωστικές πληροφορίες από τους τελικούς χρήστες.

Αρχικοποίηση της άδειας

Το Doconut απαιτεί αρχείο άδειας κατά την εκκίνηση. Η τυπική προσέγγιση είναι να ενσωματώσετε την άδεια ως πόρο και να τη φορτώσετε ως ροή όταν η εφαρμογή ξεκινά. Μόλις η ροή άδειας παρασχεθεί στο στιγμιότυπο προβολέα Doconut, το SDK ενεργοποιείται πλήρως και είναι έτοιμο να επεξεργαστεί έγγραφα.

Άνοιγμα εγγράφου και λήψη token

Όταν ένας χρήστης ζητά ένα έγγραφο, το back‑end ανοίγει το αρχείο μέσω του API της Doconut, παρέχοντας προαιρετικές παραμέτρους όπως προστασία κωδικού, ανάλυση εικόνας και χρονικό όριο. Η Doconut επιστρέφει ένα σύντομο token (συνήθως GUID) που αντιπροσωπεύει μοναδικά το ανοικτό έγγραφο. Το front‑end συμπεριλαμβάνει αυτό το token σε κάθε αίτηση πλακιδίου, π.χ. /DocImage.axd?token=abcd1234&page=1&zoom=100.

3. Παροχή Ασφαλούς API Ροής Εγγράφου για Πλαίσια JavaScript

Αν και η Doconut παρέχει ήδη έναν χαμηλού επιπέδου χειριστή πλακιδίων μέσω middleware, οι περισσότερες ομάδες προτιμούν έναν ελαφρύ controller που προσθέτει έλεγχο ταυτότητας, καταγραφή και προαιρετική υδατογράφημα.

Τυπικές ευθύνες του controller

Endpoint ανοίγματος – Δέχεται έναν αναγνωριστικό εγγράφου, εντοπίζει τη φυσική διαδρομή του αρχείου, καλεί τη Doconut για άνοιγμα του εγγράφου και επιστρέφει το παραγόμενο token.
Endpoint μικρογραφίας – Επιστρέφει ένα μικρό PNG για μια δεδομένη σελίδα, χρήσιμο για ταινίες πλοήγησης. Ο controller μπορεί απλώς να ανακατευθύνει στον χειριστή πλακιδίων της Doconut με το κατάλληλο query string.

Σκέψεις ασφαλείας

Αποθηκεύστε το token στη συνεδρία του χρήστη ή ενσωματώστε το σε claim JWT μικρής διάρκειας. Επειδή το token από μόνο του δεν μπορεί να ανακτήσει το αρχικό αρχείο χωρίς την cache του διακομιστή, το έγγραφο παραμένει προστατευμένο. Το ίδιο REST API υποστηρίζει τα μοτίβα ενσωμάτωσης React, Angular και Vue που περιγράφονται σε αυτόν τον οδηγό.

4. Ενσωμάτωση του Προβολέα σε Εφαρμογή React

Οι προγραμματιστές React μπορούν να δημιουργήσουν ένα λειτουργικό component που:

Καλεί το endpoint /open για να πάρει ένα token για το ζητούμενο έγγραφο.
Δημιουργεί έναν πίνακα URLs εικόνων που δείχνουν στον χειριστή πλακιδίων της Doconut για κάθε σελίδα (μπορείτε να ξεκινήσετε με τις πρώτες δέκα σελίδες και να φορτώνετε περισσότερες κατά απαίτηση).
Απεικονίζει τις σελίδες ως στοιχεία <img>, διαχειριζόμενο γεγονότα κύλισης ή ζουμ ενημερώνοντας τις παραμέτρους URL.

Αλληλεπίδραση με τα σημεία ενσωμάτωσης JavaScript της Doconut

Το Doconut ενσωματώνει έναν ελαφρύ βοηθό JavaScript στη σελίδα. Μέσω αυτού του βοηθού μπορείτε να εκτελείτε εντολές όπως:

Επισήμανση όρου – ζητάτε μια αναζήτηση πλήρους κειμένου σε όλο το έγγραφο και επισημαίνετε τις αντίστοιχες λέξεις.
Προσθήκη σχολίου – τοποθετείτε μια σημείωση, σφραγίδα ή σχέδιο σε συγκεκριμένη σελίδα στέλνοντας ένα payload JSON που περιλαμβάνει αριθμό σελίδας, τύπο σχολίου, συντεταγμένες και τυχόν πρόσθετα δεδομένα.

Επειδή η βαριά επεξεργασία παραμένει στον διακομιστή, το bundle του React παραμένει μικρό και η διεπαφή χρήστη παραμένει ευαίσθητη.

5. Ενσωμάτωση του Προβολέα σε Angular και Vue – Μοτίβα Επαναχρησιμοποιήσιμων Component

Angular

Δημιουργήστε μια υπηρεσία Angular που αντικατοπτρίζει το μικρό API .NET (άνοιγμα εγγράφου, λήψη μικρογραφίας). Η υπηρεσία χρησιμοποιεί HttpClient για να καλέσει τα endpoints του back‑end και επιστρέφει το token ως observable.

Στη συνέχεια χτίστε ένα component που, κατά την αρχικοποίηση, ζητά το token, κατασκευάζει τα URLs εικόνων των σελίδων και τα εμφανίζει με *ngFor. Το component μπορεί να εκθέτει κουμπιά που καλούν τον βοηθό JavaScript της Doconut για σχολιασμό και αναζήτηση, παρόμοια με το παράδειγμα React.

Vue

Στο Vue, ορίστε ένα component που χρησιμοποιεί το hook created για να ζητήσει το token μέσω fetch ή axios. Αποθηκεύστε το token και τα παραγόμενα URLs σε ένα αντικείμενο data. Απεικονίστε τις σελίδες με βρόχο v-for. Η επαναδραστικότητα του Vue κάνει εύκολο να ενημερώνεται η προβολή όταν ο χρήστης κυλά, ζουμάρει ή ενεργοποιεί μια ενέργεια σχολιασμού μέσω της ενσωμάτωσης JavaScript της Doconut.

Και τα τρία πλαίσια μοιράζονται το ίδιο συμβόλαιο back‑end, οπότε μπορείτε να επαναχρησιμοποιήσετε τον ίδιο controller ASP.NET Core χωρίς τροποποιήσεις.

Συμπέρασμα

Η ενσωμάτωση ενός πλήρους προβολέα εγγράφων δεν απαιτεί πλέον ένα μωσαϊκό τρίτων plugins ή ακριβές υπηρεσίες cloud. Με το Doconut, οι προγραμματιστές αποκτούν μια μοναδική βιβλιοθήκη στο διακομιστή που αποδίδει PDF, Office και CAD αρχεία, παρέχει σχολιασμό, αναζήτηση με OCR και ελεγχόμενη εκτύπωση—όλα ενώ διατηρεί τα έγγραφα ασφαλή και κλιμακώσιμα.

Έτοιμοι να βελτιώσετε την εμπειρία εγγράφων στην .NET, React, Angular ή Vue εφαρμογή σας; Δοκιμάστε το Doconut σήμερα και δείτε πόσο γρήγορα μπορείτε να παραδώσετε έναν επαγγελματικό, επιχειρησιακού επιπέδου προβολέα που θα λατρέψουν οι χρήστες σας.