איך מפתחים משלבים צפייה ב-PDF, Office ו-CAD באפליקציות אינטרנט .NET, React, Angular או Vue כדי לשפר ידידותיות למשתמש ויעילות: שלב אחר שלב
אם אתה מנסה להפוך אפליקציית .NET העמוסה במסמכים למשהו שמשתמשים באמת נהנים ממנו, אתה צריך מציג שיכול להתמודד עם קבצי PDF, קבצי Word, גיליונות Excel, מצגות PowerPoint ושרטוטי CAD — והכל מבלי להכריח משתמשים להוריד אפליקציית שולחן עבודה או להסתמך על שירות ענן חיצוני. כאן נכנסת Doconut לתמונה. היא מציג מסמכים בצד השרת שמזרים דפים מעובדים לדפדפנים נתמכים ומספקת אנוטציה מובנית, חיפוש טקסט מלא (כולל OCR) והדפסה מבוקרת כבר מהקופסה. במדריך זה נעבור על כל תהליך העבודה: מהגדרת מנוע ההמרה של Doconut ב‑ASP.NET Core בצד ה‑back‑end, עד לשילוב המציג ב‑React, Angular ו‑Vue בצד ה‑front‑end. מוכן לשחרר חוויית מסמכים חלקה ויעילה? בואו נצלול פנימה.
1. למה מציג ייעודי חשוב לאפליקציות אינטרנט ארגוניות
העלות המוסתרת של “הורדה‑והפתיחה”
רוב הפורטלים הישנים פשוט מציבים קישור לקובץ במאגר משותף. לחיצה עליו או מורידה את הקובץ או מעבירה אותו לתוכנית מותקנת מקומית. בפועל זה יוצר כמה בעיות:
- איבוד הקשר – משתמשים עוזבים את הפורטל, פותחים את המסמך בחלון נפרד, ואז צריכים לזכור היכן הם היו.
- רינדור בלתי עקבי – מציגי Word, Excel ו‑CAD המותקנים מקומית יכולים לפרש קבצים בצורה שונה, מה שמוביל לתקלות בפריסה שיכולות להשפיע על החלטות משפטיות או הנדסיות.
- סיכון אבטחה – קבצים יוצאים מחוץ לגבולות הארגון, מה שהופך את מסלולי הביקורת ומדיניות מניעת אובדן נתונים לסיוט.
- פרודוקטיביות נמוכה – סוקרים מתמודדים עם כמה כלים רק כדי לאנוטט, לחפש או להדפיס, מה שמאט את תהליך האישור.
מה המפתחים באמת צריכים
פתרון מודרני צריך:
- להציג כל פורמט נתמך בדפדפן (PDF, DOCX, XLSX, PPTX, DWG, DXF, …).
- לחשוף API נקי עבור back‑ends ב‑.NET ו‑front‑ends ב‑React, Angular או Vue.
- לכלול אנוטציה, חיפוש טקסט מלא (כולל OCR) והדפסה מבוקרת ללא צורך בספריות נוספות.
- להיות ניתן להרחבה בצורה מאובטחת — לעבד מסמכים בשרת, להזרים אותם כאריחי תמונה, ולעולם לא לחשוף קבצים גולמיים ללקוח.
Doconut מסמן את כל הדרישות הללו. ספריית המציג שלה פועלת בשרת .NET, ממירה מסמכי מקור לדפי רסטר לפי דרישה, ומגישה את הדפים דרך נקודת קצה HTTP קלה לשימוש שנצרכת על‑ידי האינטגרציות הנתמכות בצד ה‑front‑end.
2. קונפיגורציית Middleware של Doconut להמרת PDF ביישום ASP.NET Core
הצעד הראשון הוא לרשום את ה‑middleware של Doconut כך שה‑back‑end יוכל לספק אריחי מסמכים, תמונות ממוזערות ונתוני אנוטציה. זה נעשה בצינור הבקשות של ASP.NET Core ודורש רק כמה רישומי שירותים למטמון והקשר הבקשה.
רישום ה‑middleware
הוסף את השירותים הנדרשים (מטמון זיכרון מבוזר ו‑HTTP context accessor) ב‑ConfigureServices. לאחר מכן, ב‑Configure, מפת את נקודת הקצה של Doconut (בדרך כלל DocImage.axd) ל‑middleware של Doconut. אפשרויות ה‑middleware מאפשרות לך לאכוף רינדור בטוח ולהסתיר אבחונים פנימיים ממשתמשי הקצה.
אתחול הרישיון
Doconut דורש קובץ רישיון בעת ההפעלה. הגישה השגרתית היא לשבץ את הרישיון כמשאב ולטעון אותו כ‑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, רוב הצוותים מעדיפים בקר (controller) קל שמוסיף אימות, רישום, והוספת סימן מים אופציונלי.
תפקידי בקר טיפוסיים
- נקודת קצה לפתיחה – מקבלת מזהה מסמך, פותרת את נתיב הקובץ הפיזי, קוראת ל‑Doconut כדי לפתוח את המסמך, ומחזירה את האסימון שנוצר.
- נקודת קצה לתמונת ממוזערת – מחזירה PNG קטן עבור דף נתון, שימושי לרצועות ניווט. הבקר יכול פשוט להפנות למטפל האריחים של Doconut עם מחרוזת השאילתה המתאימה.
שיקולי אבטחה
שמור את האסימון במושב המשתמש או הטמע אותו בטענה של JWT קצר‑חיים. מכיוון שהאסימון לבדו אינו יכול לשחזר את הקובץ המקורי ללא המטמון בצד השרת, המסמך נשאר מוגן. ה‑REST API הזה תומך בתבניות האינטגרציה של React, Angular ו‑Vue המתוארות במדריך זה.
4. הטמעת המציג ביישום React
מפתחים ב‑React יכולים ליצור רכיב פונקציונלי ש:
- קורא לנקודת הקצה
/openכדי לקבל אסימון עבור המסמך המבוקש. - בונה מערך של כתובות URL לתמונות שמצביעות על מטפל האריחים של Doconut עבור כל דף (ניתן להתחיל עם עשרת הדפים הראשונים ולטעון נוספים לפי דרישה).
- מציג את הדפים כאלמנטים
<img>, ומטפל באירועי גלילה או זום על‑ידי עדכון פרמטרי ה‑URL.
אינטראקציה עם נקודות האינטגרציה של JavaScript של Doconut
Doconut משלב עוזר JavaScript קל משקל בדף. דרך העוזר הזה ניתן להוציא פקודות כגון:
- הדגשת מונח – לבצע חיפוש טקסט מלא ברחבי המסמך ולהדגיש מילים תואמות.
- הוספת אנוטציה – למקם פתק דביק, חותמת או ציור בדף ספציפי על‑ידי שליחת מטען JSON הכולל מספר דף, סוג האנוטציה, קואורדינטות וכל מידע נוסף.
כיוון שהעבודה הכבדה של הרינדור נשארת בשרת, חבילת ה‑React נשארת קטנה וה‑UI נשאר רספונסיבי.
5. הטמעת המציג ב‑Angular וב‑Vue – תבניות רכיב ניתנות לשימוש חוזר
Angular
צור שירות Angular שמשקף את ה‑API הקטן של .NET (פתיחת מסמך, קבלת תמונה ממוזערת). השירות משתמש ב‑HttpClient כדי לקרוא לנקודות הקצה של ה‑back‑end ומחזיר את האסימון כ‑observable.
לאחר מכן בנה רכיב שכאשר הוא מאותחל, מבקש את האסימון, בונה את כתובות ה‑URL של תמונות הדפים, ומציג אותן עם *ngFor. הרכיב יכול לחשוף כפתורים שקוראים לעוזר JavaScript של Doconut לאנוטציה וחיפוש, בדומה לדוגמה ב‑React.
Vue
ב‑Vue, הגדר רכיב שמשתמש במלכודת מחזור החיים created כדי לבקש את האסימון דרך fetch או axios. שמור את האסימון ואת כתובות ה‑URL של הדפים שנוצרו באובייקט הנתונים של הרכיב. הצג את הדפים עם לולאת v-for. הריאקטיביות של Vue מאפשרת לעדכן את התצוגה בקלות כאשר המשתמש גולל, מזום, או מפעיל פעולה של אנוטציה דרך אינטגרציית JavaScript של Doconut.
כל שלוש המסגרות חולקות את אותו חוזה back‑end, ולכן ניתן להשתמש באותו בקר ASP.NET Core ללא שינוי.
סיכום
הטמעת מציג מסמכים מלא תכונות אינה דורשת יותר פסיפס של תוספים של צד שלישי או שירותי ענן יקרים. עם Doconut, מפתחים מקבלים ספרייה יחידה בצד השרת שמציגה קבצי PDF, Office ו‑CAD, מספקת אנוטציה, חיפוש מבוסס OCR, והדפסה מבוקרת — והכל תוך שמירה על אבטחת המסמכים והיכולת להרחבה.
מוכן לשדרג את חוויית המסמכים ביישום .NET, React, Angular או Vue שלך? נסה את Doconut היום וראה כמה מהר ניתן לשחרר מציג מלוטש ברמת ארגון שהמשתמשים שלך יאהבו.