كيف يدمج المطورون عرض ملفات 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، …).
- توفير واجهة برمجة تطبيقات نظيفة للواجهات الخلفية .NET والواجهات الأمامية React أو Angular أو Vue.
- تضمين التعليقات التوضيحية، البحث النصي الكامل (مع OCR) والطباعة المُتحكم فيها دون الحاجة إلى مكتبات إضافية.
- التوسع بأمان—معالجة المستندات على الخادم، بثها كقوالب صور، وعدم كشف الملفات الأصلية للعميل أبداً.
Doconut يحقق كل هذه المتطلبات. مكتبة العارض تعمل على خادم .NET، تحول المستندات المصدرية إلى صفحات نقطية عند الطلب، وتقدم هذه الصفحات عبر نقطة نهاية HTTP خفيفة تُستهلك من قبل التكاملات الأمامية المدعومة.
2. تكوين Middleware الخاص بـ Doconut لتحويل PDF في تطبيق ASP.NET Core
الخطوة الأولى هي تسجيل Middleware الخاص بـ Doconut حتى يتمكن الخلفية من تقديم قوالب المستندات، المصغرات، وبيانات التعليقات التوضيحية. يتم ذلك في خط أنابيب طلبات ASP.NET Core ويتطلب فقط بضع عمليات تسجيل خدمة للتخزين المؤقت وسياق الطلب.
تسجيل Middleware
أضف الخدمات المطلوبة (ذاكرة التخزين المؤقت الموزعة ومُدخل سياق HTTP) في ConfigureServices. ثم، في Configure، قم بربط نقطة النهاية الخاصة بـ Doconut (عادةً DocImage.axd) بـ Middleware الخاص بـ Doconut. تسمح خيارات Middleware بفرض عرض آمن وإخفاء التشخيصات الداخلية عن المستخدمين النهائيين.
تهيئة الترخيص
يتطلب Doconut ملف ترخيص عند بدء التشغيل. النهج الشائع هو تضمين الترخيص كموارد وتحميله كتيار عندما يبدأ التطبيق. بمجرد تمرير تيار الترخيص إلى مثيل عارض Doconut، يتم تفعيل SDK بالكامل ويصبح جاهزًا لمعالجة المستندات.
فتح مستند والحصول على رمز مميز
عند طلب المستخدم لمستند، يفتح الخلفية الملف عبر API الخاص بـ Doconut، مع تمرير معلمات اختيارية مثل حماية كلمة المرور، دقة الصورة، والمهلة. تُعيد Doconut رمزًا مميزًا قصيرًا (عادةً GUID) يمثل المستند المفتوح بشكل فريد. يضمّن الواجهة الأمامية هذا الرمز في كل طلب قوالب، على سبيل المثال /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 خفيف في الصفحة. من خلال هذا المساعد يمكنك إصدار أوامر مثل:
- تمييز مصطلح – طلب بحث نص كامل عبر المستند وتمييز الكلمات المطابقة.
- إضافة تعليق توضيحي – وضع ملاحظة لاصقة أو ختم أو رسم على صفحة معينة بإرسال حمولة JSON تتضمن رقم الصفحة، نوع التعليق، الإحداثيات، وأي بيانات إضافية.
نظرًا لأن عمل المعالجة الثقيلة يبقى على الخادم، يبقى حزمة React صغيرة وتظل الواجهة سريعة الاستجابة.
5. تضمين العارض في Angular وVue – أنماط مكوّنات قابلة لإعادة الاستخدام
Angular
أنشئ خدمة Angular تعكس API .NET الصغير (فتح مستند، جلب مصغرة). تستخدم الخدمة HttpClient لاستدعاء نقاط النهاية الخلفية وتعيد الرمز المميز كملاحظة Observable.
بعد ذلك، أنشئ مكوّنًا يقوم، عند التهيئة، بطلب الرمز المميز، بناء عناوين URL لصفحات الصور، وعرضها باستخدام *ngFor. يمكن للمكوّن أن يوفّر أزرارًا تستدعي مساعد JavaScript الخاص بـ Doconut للتعليقات والبحث، مشابهًا لمثال React.
Vue
في Vue، عرّف مكوّنًا يستخدم دورة حياة created لطلب الرمز المميز عبر fetch أو axios. احفظ الرمز المميز وعناوين الصفحات المولدة في كائن data الخاص بالمكوّن. اعرض الصفحات باستخدام حلقة v-for. تجعل رد فعل Vue من السهل تحديث العرض عندما يمرّر المستخدم أو يكبر أو يُنفّذ إجراءً تعليقيًا عبر دمج JavaScript الخاص بـ Doconut.
جميع الأطر الثلاثة تشترك في نفس عقدة الخلفية، لذا يمكنك إعادة استخدام وحدة تحكم ASP.NET Core نفسها دون تعديل.
الخلاصة
لم يعد تضمين عارض مستندات متكامل يتطلب مجموعة من الإضافات الطرفية أو خدمات سحابية مكلفة. مع Doconut، يحصل المطورون على مكتبة خادم واحدة تُظهر ملفات PDF وOffice وCAD، وتوفر تعليقات توضيحية، بحثًا مدعومًا بـ OCR، وطباعة مُتحكم فيها—كل ذلك مع الحفاظ على أمان المستندات وقابليتها للتوسع.
هل أنت مستعد للارتقاء بتجربة المستندات في تطبيق .NET أو React أو Angular أو Vue الخاص بك؟ جرّب Doconut اليوم وشاهد مدى السرعة التي يمكنك بها نشر عارض مؤسسي مصقول سيحبه المستخدمون.