كيف يدمج المطورون عرض ملفات 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 context accessor) في 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 Frameworks
بينما توفر Doconut بالفعل معالج قطع منخفض المستوى عبر Middleware، يفضّل معظم الفرق إنشاء طبقة تحكم رقيقة تضيف المصادقة، التسجيل، وإمكانية وضع علامة مائية اختيارية.
مسؤوليات المتحكم النموذجية
- نقطة نهاية الفتح – تستقبل معرف المستند، تحدد مسار الملف الفعلي، تستدعي Doconut لفتح المستند، وتعيد الرمز المميز المُولد.
- نقطة نهاية المصغرات – تُعيد صورة PNG صغيرة لصفحة معينة، مفيدة لأشرطة التنقل. يمكن للمتحكم ببساطة إعادة توجيه الطلب إلى معالج قطع Doconut مع سلسلة الاستعلام المناسبة.
اعتبارات الأمان
خزن الرمز المميز في جلسة المستخدم أو أدمجه في مطالبة JWT قصيرة العمر. لأن الرمز المميز وحده لا يمكنه استرجاع الملف الأصلي دون ذاكرة التخزين المؤقت على الخادم، يبقى المستند محميًا. تدعم نفس واجهة 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 اليوم وشاهد مدى السرعة التي يمكنك بها نشر عارض مؤسسي مصقول سيحبه المستخدمون.