استعادة اسم الملف من استجابة Blob في Angular: دليل شامل

كمطور Angular، قد تواجه تحديًا شائعًا عند التعامل مع استجابات الواجهة البرمجية (API) التي تُرجع ملفات بتنسيق Blob. أحد الأسئلة المتكررة هو: كيف يمكن استعادة اسم الملف الأصلي من استجابة Blob؟ هذا الدليل الشامل سيقدم لك حلولاً عملية ومُحسّنة لمساعدتك في التعامل مع هذا السيناريو بفعالية.

فهم التحدي: لماذا لا تحتوي كائنات Blob على اسم الملف؟

وفقًا لـ MDN، فإن كائنات Blob (Binary Large Object) هي كائنات تشبه الملفات من حيث البيانات الثنائية غير القابلة للتغيير. تحتوي هذه الكائنات بشكل أساسي على معلومات حول حجمها (size) ونوعها (type)، ولكنها لا تتضمن أي معلومات وصفية مثل اسم الملف الأصلي. هذا يعني أنك ستحتاج إلى طريقة أخرى للحصول على اسم الملف الفعلي عند التعامل معها في تطبيقك.

استراتيجيات استعادة اسم الملف من استجابة Blob

للتغلب على هذا القيد، هناك طريقتان رئيسيتان يمكنك اتباعهما لاستعادة اسم الملف بنجاح من استجابة Blob.

1. تمرير اسم الملف كمعامل ضمن الحمولة (Payload)

في كثير من الأحيان، يكون اسم الملف متاحًا بالفعل في بيانات الحمولة التي ترسلها إلى الخادم أو التي تستقبلها منه كجزء من استجابة أوسع. إذا كانت الدالة التي تُجري طلب الـ POST أو الـ GET تستقبل كائن بيانات يتضمن fileName، يمكنك ببساطة استخدام هذه البيانات.

على سبيل المثال، إذا كانت دالة تنزيل ملف Excel تستقبل كائن data يحتوي على fileName، يمكنك استخدامه مباشرةً لحفظ الملف:

 public downloadExcel(data): void {
  const url: string = '[api endpoint here ]';
  this.http.post(url, data.body, { responseType: 'blob' })
    .subscribe(
      (response: Blob) => saveAs(response, data.fileName + '.xlsx')
    );
}

في هذا المثال، يتم تمرير data.fileName إلى الدالة saveAs (التي عادةً ما تكون جزءًا من مكتبة مثل file-saver) لتحديد اسم الملف عند حفظه. من المهم دائمًا تسجيل كائن data إلى وحدة التحكم (console.log(data)) للتحقق من المعلومات المتاحة فيه، فقد تجد اسم الملف أو أي بيانات وصفية أخرى مفيدة هناك.

2. قراءة رؤوس استجابة HTTP (Response Headers)

خيار آخر قوي لاستعادة اسم الملف هو قراءة رؤوس استجابة HTTP نفسها. غالبًا ما تتضمن استجابات الواجهة البرمجية معلومات مفيدة في الرؤوس، مثل نوع المحتوى وتاريخ الإنشاء وحتى اسم الملف. الرأس الأكثر شيوعًا الذي يحتوي على اسم الملف هو Content-Disposition، ولكن قد تستخدم بعض الواجهات البرمجية رؤوسًا مخصصة مثل X-Filename أو X-Token (كما في المثال الأصلي).

نظرًا لأنك تستخدم HttpClient في Angular لإجراء الطلبات، يمكنك تكوينه لاستقبال الاستجابة الكاملة بما في ذلك الرؤوس. ومع ذلك، يجب الانتباه إلى أن ليس كل الرؤوس يمكن الوصول إليها من جانب العميل افتراضيًا. يجب على الخادم تعيين رأس Access-Control-Expose-Headers لتحديد الرؤوس التي يمكن للعميل قراءتها.

إذا كان رأس مثل X-Token أو Content-Disposition مكشوفًا (exposed)، يمكنك استخدام خيار { observe: 'response' } في طلب HttpClient للحصول على الاستجابة الكاملة، ثم استخراج الرأس المطلوب:

http
  .get<any>('url', { observe: 'response' })
  .subscribe(resp => {
    console.log(resp.headers.get('X-Token'));
    // أو لاستخراج اسم الملف من Content-Disposition
    const contentDisposition = resp.headers.get('Content-Disposition');
    if (contentDisposition) {
      const filenameMatch = contentDisposition.match(/filename="([^"]+)"/);
      if (filenameMatch && filenameMatch.length > 1) {
        const filename = filenameMatch[1];
        console.log('Filename from header:', filename);
      }
    }
  });

في هذا المثال، يتم استخدام resp.headers.get('X-Token') لاستعادة قيمة رأس X-Token. لقد أضفنا أيضًا مثالًا إضافيًا يوضح كيفية استخراج اسم الملف من رأس Content-Disposition، وهو الأسلوب الأكثر شيوعًا والأفضل ممارسة في مثل هذه الحالات. تأكد من مراجعة وثائق الواجهة البرمجية (API documentation) الخاصة بك لمعرفة أي رؤوس مخصصة قد تستخدمها.

الخلاصة التقنية

إن استعادة اسم الملف من استجابة Blob في Angular تتطلب فهمًا لكيفية عمل كائنات Blob والآليات المتاحة لتمرير البيانات الوصفية. سواء اخترت تضمين اسم الملف مباشرةً ضمن الحمولة المرسلة أو الاعتماد على رؤوس استجابة HTTP، فإن المفتاح يكمن في التنسيق الجيد بين جانب العميل (تطبيق Angular) وجانب الخادم (الواجهة البرمجية). يُعد استخدام رأس Content-Disposition مع ضبط Access-Control-Expose-Headers على الخادم هو الأسلوب الأكثر قوة ومرونة، حيث يوفر حلاً قياسيًا وموثوقًا به لضمان حصول المستخدم على الملف بالاسم الصحيح.