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

Αν προσπαθείτε να μετατρέψετε μια εφαρμογή .NET γεμάτη έγγραφα σε κάτι που οι χρήστες πραγματικά απολαμβάνουν, χρειάζεστε έναν προβολέα που να διαχειρίζεται PDF, αρχεία Word, φύλλα Excel, παρουσιάσεις PowerPoint και σχέδια CAD—όλα χωρίς να αναγκάζετε τους χρήστες να κατεβάσουν μια επιτραπέζια εφαρμογή ή να βασιστούν σε εξωτερική υπηρεσία cloud. Εδώ έρχεται το Doconut. Πρόκειται για έναν προβολέα εγγράφων στο διακομιστή που μεταδίδει τις αποδομένες σελίδες σε υποστηριζόμενα προγράμματα περιήγησης και παρέχει εγγενή σχολιασμό, αναζήτηση πλήρους κειμένου (συμπεριλαμβανομένου OCR) και ελεγχόμενη εκτύπωση αμέσως. Σε αυτόν τον οδηγό θα περάσουμε από όλη τη ροή εργασίας: από τη διαμόρφωση της μηχανής μετατροπής της Doconut σε ένα back‑end 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, μετατρέπει τα πηγαία έγγραφα σε σελίδες raster κατά απαίτηση, και σερβίρει αυτές τις σελίδες μέσω ενός ελαφρού HTTP endpoint που καταναλώνεται από τις υποστηριζόμενες ενσωματώσεις front‑end.

2. Διαμόρφωση του Μεσαίου Λογισμικού Doconut για Μετατροπή PDF σε Εφαρμογή ASP.NET Core

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

Καταχώριση του μεσαίου λογισμικού

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

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

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

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

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

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

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

Τυπικές ευθύνες του ελεγκτή

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

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

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

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

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

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

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

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

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

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

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

Angular

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

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

Vue

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

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

Συμπέρασμα

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

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