איך מפתחים משבצים צפייה ב‑PDF, Office ו‑CAD באפליקציות אינטרנט .NET, React, Angular או Vue לשיפור ידידותיות למשתמש ויעילות: שלב אחר שלב
אם אתה מנסה להפוך אפליקציית .NET עמוסת מסמכים למשהו שמשתמשים באמת נהנים ממנו, אתה צריך מציג שמטפל ב‑PDF, קבצי Word, גיליונות Excel, מצגות PowerPoint וגם בתוכניות CAD—הכל ללא צורך להכריח משתמשים להוריד אפליקציית שולחן עבודה או להסתמך על שירות ענן חיצוני. כאן נכנס Doconut לתמונה. מדובר במציג מסמכים בצד השרת שמזרים דפים מרונדרים לדפדפנים נתמכים ומספק אנוטציה מקומית, חיפוש טקסט מלא (כולל OCR) והדפסה מבוקרת ישירות מתוך הקופסה. במדריך זה נעבור על כל תהליך העבודה: מהגדרת מנוע ההמרה של Doconut ב‑ASP.NET Core, עד לשיבוץ המציג ב‑React, Angular ו‑Vue. מוכנים לספק חוויית מסמכים חלקה ויעילה? בואו נצלול פנימה.
1. למה מציג ייעודי חשוב לאפליקציות אינטרנט ארגוניות
העלות החבויה של “הורד‑ולפתח”
רוב הפורטלים הישנים פשוט מציבים קישור לקובץ במאגר. לחיצה עליו או מורידה את הקובץ או מעבירה אותו לתוכנית מותקנת מקומית. בפועל זה יוצר כמה בעיות:
- הקשר אבוד – משתמשים עוזבים את הפורטל, פותחים את המסמך בחלון נפרד, ואז צריכים לזכור היכן הם היו.
- רינדור בלתי עקבי – מציגי Word, Excel ו‑CAD המותקנים מקומית יכולים לפרש קבצים בצורה שונה, מה שמוביל לתקלות בפריסה שעלולות להשפיע על החלטות משפטיות או הנדסיות.
- סיכון אבטחה – קבצים יוצאים מחוץ לגבול הארגון, מה שהופך את מסלולי האודיט ומדיניות מניעת אובדן נתונים למזעזעים.
- פרודוקטיביות נמוכה – סוקרים מתמודדים עם כלים מרובים רק כדי להוסיף אנוטציות, לחפש או להדפיס, מה שמאט את תהליך האישור.
מה המפתחים באמת צריכים
פתרון מודרני צריך:
- להציג כל פורמט נתמך בדפדפן (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- לחשוף API נקי עבור צדדי .NET ו‑React, Angular או Vue.
- לכלול אנוטציה, חיפוש טקסט מלא (כולל OCR) והדפסה מבוקרת ללא צורך בספריות נוספות.
- להיות מדרג באופן מאובטח—לעבד מסמכים בשרת, להזרים אותם כאריחי תמונה, ולעולם לא לחשוף קבצים גולמיים ללקוח.
Doconut מסמן את כל הדרישות האלה. ספריית המציג שלו פועלת על שרת .NET, ממירה מסמכי מקור לדפים רסטריים לפי דרישה, ומגישה את הדפים דרך נקודת קצה HTTP קלה המשמשת את האינטגרציות בצד הלקוח.
2. קונפיגורציית Middleware של Doconut להמרת PDF ב‑יישום ASP.NET Core
הצעד הראשון הוא לרשום את ה‑middleware של Doconut כך שה‑back‑end יוכל לספק אריחי מסמכים, תמונות ממוזערות ונתוני אנוטציה. זה נעשה בצינור הבקשות של ASP.NET Core ודורש רק כמה רישומי שירותים למטמון והקשר HTTP.
רישום ה‑middleware
הוסף את השירותים הנדרשים (מטמון בזיכרון מבוזר ו‑HttpContextAccessor) ב‑ConfigureServices. לאחר מכן, ב‑Configure, מפת את נקודת הקצה של Doconut (בדרך כלל DocImage.axd) ל‑middleware של Doconut. אפשרויות ה‑middleware מאפשרות לך לאכוף רינדור בטוח ולהסתיר דיאגנוסטיקה פנימית ממשתמשי הקצה.
אתחול הרישיון
Doconut דורש קובץ רישיון בעת ההפעלה. הגישה הרגילה היא לשבץ את הרישיון כ‑resource ולטעון אותו כ‑stream כאשר האפליקציה מתחילה. לאחר שה‑stream של הרישיון מועבר למופע המציג של Doconut, ה‑SDK מופעל במלואו ומוכן לעיבוד מסמכים.
פתיחת מסמך וקבלת טוקן
כאשר משתמש מבקש מסמך, ה‑back‑end פותח את הקובץ דרך API של Doconut, תוך העברת פרמטרים אופציונליים כגון הגנה בסיסמא, רזולוציית תמונה וזמן קצוב. Doconut מחזיר טוקן קצר (בדרך כלל GUID) שמייצג באופן ייחודי את המסמך הפתוח. ה‑front‑end כולל טוקן זה בכל בקשת אריח, לדוגמה /DocImage.axd?token=abcd1234&page=1&zoom=100.
3. חשיפת API זרם מסמכים מאובטח עבור מסגרות JavaScript
בעוד Doconut כבר מספק מטפל אריחים ברמה נמוכה דרך ה‑middleware, רוב הצוותים מעדיפים בקרת‑קונטרולר רזה שמוסיף אימות, רישום ואפשרות למים קבועים.
תחומי אחריות טיפוסיים של הקונטרולר
- נקודת קצה לפתיחה – מקבלת מזהה מסמך, מאתרת את הנתיב הפיזי, קוראת ל‑Doconut לפתיחת המסמך ומחזירה את הטוקן שנוצר.
- נקודת קצה לתמונה ממוזערת – מחזירה PNG קטן עבור דף נתון, שימושי לרצועות ניווט. הקונטרולר יכול פשוט להפנות למטפל אריחים של Doconut עם מחרוזת השאילתה המתאימה.
שיקולי אבטחה
אחסן את הטוקן במושב המשתמש או הטמע אותו בטענה JWT קצרה. מכיוון שהטוקן לבדו אינו יכול לשחזר את הקובץ המקורי ללא המטמון בצד השרת, המסמך נשאר מוגן. ה‑API REST הזה תומך בתבניות האינטגרציה של React, Angular ו‑Vue המתוארות במדריך.
4. שיבוץ המציג ביישום React
מפתחים ב‑React יכולים ליצור רכיב פונקציונלי ש:
- קורא לנקודת הקצה
/openכדי לקבל טוקן עבור המסמך המבוקש. - בונה מערך של כתובות URL לתמונות שמצביעות על מטפל האריחים של Doconut לכל דף (ניתן להתחיל עם העשרת העמודים הראשונים ולטעון נוספים לפי דרישה).
- מציג את העמודים כ‑אלמנטים
<img>, מטפל באירועי גלילה או זום על‑ידי עדכון פרמטרי ה‑URL.
אינטראקציה עם נקודות האינטגרציה של JavaScript של Doconut
Doconut משלב עוזר JavaScript קל משקל בדף. דרך העוזר ניתן לבצע פקודות כגון:
- הדגשת מונח – מבצע חיפוש טקסט מלא על פני המסמך ומדגיש מילים תואמות.
- הוספת אנוטציה – מציב פתק, חותמת או ציור על דף ספציפי על‑ידי שליחת payload JSON הכולל מספר עמוד, סוג אנוטציה, קואורדינטות וכל מידע נוסף.
מאחר שהעבודה הכבדה של הרינדור נשארת בשרת, חבילת ה‑React נשארת קטנה וה‑UI נשאר רספונסיבי.
5. שיבוץ המציג ב‑Angular וב‑Vue – תבניות רכיב חוזרות
Angular
צור שירות Angular המשקף את ה‑API הקטן של .NET (פתיחת מסמך, קבלת תמונה ממוזערת). השירות משתמש ב‑HttpClient כדי לקרוא לנקודות הקצה של ה‑back‑end ומחזיר את הטוקן כ‑Observable.
לאחר מכן בנה רכיב שב‑ngOnInit שלו מבקש את הטוקן, בונה את כתובות תמונות העמודים ומציג אותן עם *ngFor. הרכיב יכול לחשוף כפתורים שמפעילים את העוזר JavaScript של Doconut לאנוטציה וחיפוש, בדומה לדוגמה ב‑React.
Vue
ב‑Vue, הגדר רכיב שמשתמש במלכודת החיים created כדי לבקש את הטוקן דרך fetch או axios. שמור את הטוקן ואת כתובות העמודים שנוצרו באובייקט data של הרכיב. הצג את העמודים עם לולאת v-for. הריאקטיביות של Vue מאפשרת עדכון חלק של התצוגה כאשר המשתמש גולל, מזום או מפעיל פעולה של אנוטציה דרך העוזר של Doconut.
כל שלוש המסגרות חולקות את אותו חוזה back‑end, כך שניתן להשתמש באותו קונטרולר ASP.NET Core ללא שינוי.
סיכום
שיבוץ מציג מסמכים מלא תכונות אינו דורש יותר מארגז של תוספים של צד שלישי או שירותי ענן יקרים. עם Doconut, מפתחים מקבלים ספרייה יחידה בצד השרת שמרנדרת קבצי PDF, Office ו‑CAD, מספקת אנוטציה, חיפוש מבוסס OCR והדפסה מבוקרת—הכל תוך שמירה על אבטחת המסמכים והיכולת להרחיב את המערכת.
מוכן לשדרג את חוויית המסמכים ב‑.NET, React, Angular או Vue שלך? נסה את Doconut היום וראה כמה מהר ניתן לשחרר מציג ארגוני מלוטש שהמשתמשים שלך יאהבו.