چند وقت پیش یک تسکی برام تعریف شد که باید با کلیک روی یک دکمه، ریکوئست به سرور میزدم و دیتای برگشتی از سرور رو به صورت خروجی اکسل دانلود میکردم. در این مقاله سعی میکنم همین کار رو قدم به قدم در قالب یک پروژه مجزا توضیح بدم.
اول از همه یک پروژه جدید تعریف میکنم به اسم xlsx:
حالا باید پکیج xlsx رو هم روی پروژه نصب کنم:
از بالا اومدن پروژه مطمئن میشم:
وقتی پروژه رو روی loacalhost:4200 ( آدرس پیشفرض پروژه روی لوکال ) دیدم به بقیه کار ادامه میدم.
یک تابع کال بک برای شروع فرایند دانلود گزارش در فایل app.component.ts تعریف میکنم:
اسم تابع رو exportClickHandler گذاشتم.
حالا یک آیکن برای دانلود در فایل app.component.html به ظاهر پروژه اضافه میکنم و کال بک رو به click event ش اضافه میکنم:
با کلیک روی آیکن باید متن clicked رو در کنسول ببینم. با دیدن متن مورد نظر به مرحله بعدی میرم:
به کامپوننت app.component.ts یک آبجکت از httpClient انگولار رو inject میکنم تا بتونم ریکوئست بفرستم و بگیرم:
و البته اضافه کردن HttpClientModule به app.module.ts
حالا یک API پابلیک روی وب انتخاب میکنم و بهش درخواست ارسال میکنم و چک میکنم جوابش رو دریافت کنم. api که من انتخاب کردم یک لیست از post های مختلف رو میفرسته. روش کار قدیمی یا جدیدش فرقی نمیکنه. میخوایم به دانلود اکسل برسیم:
با کلیک روی آیکن دانلود جواب api رو داخل کنسول میبینیم و میتونیم برسیم به قسمت اصلی
اول یک interface به اسم Post داخل فایلی بنام post.ts تعریف کردم:
این interface رو داخل app.component.ts ایمپورت کردم و یک متغیر داخل کلاس تعریف کردم بنام postList که لیست پست های دریافت شده رو داخلش قرار بدم:
حالا دریافت دیتای api رو به صورت زیر تغییر دادم:
حالا چطوری از طریق کنسول ببینم آیا متغیرمون پر شده یا نه؟
اول روی آیکن دانلود کلیک میکنم. بعدش:
داخل صفحه یک آیکن داریم و دیگر هیچ. پس با دستور زیر به DOM node آیکن داخل صفحه میرسم:
با اجرای دستور زیر به AppComponent میرسم ( کامپوننتی که حاوی node آیکنم هست):
درسته که در جواب کنسول دارم postList رو می بینم. ولی اگر تعداد متغیرها زیاد بود، با صدا کردن property مورد نظر از آبجکت کامپوننت، میتونم محتوای داخلش رو ببینم:
حالا که لیست post هامون پر شده و دیتا رو داخل کامپوننت نگه میدارم، میرم سراغ مرحله بعد:
یک جدول داخل صفحه app.component.html تعریف کردم و دیتا ها رو بهش پاس دادم:
برای پنهان کردنش راه های مختلفی هست. من با اضافه کردن استایل های زیر به app.component.scss این کار رو انجام دادم:
حالا بریم برای بخش نهایی و استفاده از پکیج xlsx.
اول پکیج xlsx رو به صورت زیر داخل app.component.ts ایمپورت میکنم:
حجم پکیج 420.3k هست که به صورت gzipped میرسه به 138.6k. نسبتا پکیج بزرگی هست.
وقتی لیست پست های دریافتی از api رو به آرایه postList پاس میدم، هیچ render خاصی روی صفحه انجام نشده. بنابر این به کمک setTimeout ، اجرای کد رو به بعد از رندر مجدد صفحه در event loop موکول میکنم:
به محض اجرای مجدد اپلیکیشن و کلیک رو دکمه دانلود، یک فایل به اسم Posts.xlsx دانلود میشه و تمااااممم.
امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.
اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)
:)
