بمجرد أن تكون قادرًا على استرجاع الملف من قاعدة البيانات وتحديد مساره بنجاح من خلال خدمة ASP.Net Web API، يمكنك البدء في تطبيق Angular2 لعرض هذا الملف PDF في المتصفح. سأوضح لك الخطوات التي يمكن اتخاذها لتحقيق ذلك.
أولاً، في الجانب الخادم (ASP.Net Web API):
-
تأكد من أن الطريقة
GetSOP
تعيد المسار الصحيح للملف PDF في الخادم. -
ضمن هذه الطريقة، افتح الملف PDF باستخدام
FileStream
كما تفعل الآن. -
ثم، قم بإنشاء
HttpResponseMessage
وضبط محتواه على البيانات المقروءة من الملف. -
ضبط رأس الاستجابة ليعكس نوع المحتوى ليكون من نوع “application/pdf” بدلاً من “application/octet-stream”.
ثانياً، في جانب العميل (Angular2):
-
استخدم خدمة Angular2 لاستدعاء الطريقة المناسبة من خدمة ASP.Net Web API لاسترداد الملف.
-
بمجرد الحصول على البيانات من الاستجابة، يجب عليك تحويلها إلى Blob (كائن بيانات ثنائية كبير) باستخدام
new Blob([data], { type: 'application/pdf' })
. -
ثم، قم بإنشاء عنوان URL مؤقت لهذا الـ Blob باستخدام
URL.createObjectURL(blob)
. -
أخيرًا، استخدم هذا العنوان URL المؤقت لفتح ملف PDF في علامة تبويب جديدة من خلال فتحه في نافذة مستعرض المستخدم باستخدام
window.open(url)
.
يجب أن تعمل هذه الخطوات بشكل صحيح لعرض الملف PDF في متصفح المستخدم من خلال Angular2. وفي حال وجود أي مشكلة، يمكنك مراجعة تفاصيل الخطأ في الطلبات أو الاستجابات لمعرفة السبب الذي يمنع عرض الملف بشكل صحيح.
المزيد من المعلومات
بالطبع، سنقوم الآن بتوسيع المقال لشرح كل خطوة بشكل أكثر تفصيلاً.
في البداية، دعنا نتناول الجانب الخادم (ASP.Net Web API):
-
التأكد من أن الطريقة
GetSOP
تعيد المسار الصحيح للملف PDF في الخادم:
قبل البدء في استرجاع الملف، يجب التحقق من أن الطريقةGetSOP
في خدمتك تقوم بإرجاع مسار صحيح للملف PDF المطلوب. يمكنك فحص هذا الأمر عن طريق تسجيل قيمةsopPath
قبل إعادتها من الدالة والتأكد من أنها تشير إلى المسار الصحيح للملف المطلوب. -
استخدام
FileStream
لفتح الملف:
بمجرد الحصول على المسار الصحيح، يجب عليك استخدامFileStream
لفتح الملف بناءً على المسار الذي تم استرجاعه. هذا يضمن أن البيانات المرسلة ستكون من الملف الصحيح. -
إعداد الاستجابة:
بعد فتح الملف باستخدامFileStream
، قم بإنشاءHttpResponseMessage
وضبط محتواه على البيانات المقروءة من الملف. يجب أن تكون هذه البيانات جاهزة للإرسال إلى العميل. -
ضبط رأس الاستجابة:
من المهم أيضًا ضبط رأس الاستجابة ليعكس نوع المحتوى الذي سيتم إرساله. في حالة الملفات PDF، يجب ضبط رأس الاستجابة ليكون من نوع “application/pdf” لضمان أن المتصفح يعرف كيفية التعامل مع الملف.
الآن، لننتقل إلى الجانب العميل (Angular2):
-
استدعاء الطريقة المناسبة من خدمة ASP.Net Web API:
في Angular2، يمكنك استخدام خدمة لإجراء طلب إلى خدمة ASP.Net Web API الخاصة بك لاسترداد الملف. تأكد من استخدام الطريقة الصحيحة وتمرير أي بيانات إضافية إذا لزم الأمر مثلpartnum
وdescription
. -
تحويل البيانات إلى Blob:
عندما تستلم البيانات من الاستجابة، ستكون عادةً في شكل نصي. يجب عليك تحويل هذه البيانات إلى كائن Blob باستخدامnew Blob([data], { type: 'application/pdf' })
. هذا يضمن أن البيانات متوافقة مع عرض ملف PDF. -
إنشاء عنوان URL مؤقت للـ Blob:
بمجرد تحويل البيانات إلى Blob، يجب عليك إنشاء عنوان URL مؤقت لهذا الـ Blob باستخدامURL.createObjectURL(blob)
. -
عرض الملف في علامة تبويب جديدة:
أخيرًا، يمكنك استخدام هذا العنوان URL المؤقت لفتح ملف PDF في علامة تبويب جديدة باستخدامwindow.open(url)
.
مع اتباع هذه الخطوات، يجب أن تكون قادرًا على عرض ملف PDF بنجاح في المتصفح الخاص بك. ولكن لا تتردد في مراجعة التوثيق الخاص بـ Angular2 و ASP.Net Web API للحصول على مزيد من المساعدة في حالة وجود مشاكل أو استفسارات إضافية.