1. Kirish
Loyihani amalga oshirish jarayonida foydalanuvchining ekrandan ko‘rgan ma'lumotlarini Excelga yuklab olish funksiyasini ishlab chiqishga qaror qildik. Bu ma'lumotlarni chiqarishdan ko‘ra, foydalanuvchiga ekranda ko‘rgan shaklda iloji boricha bir xil natijani Excelda ham taqdim etishbu talab edi.
Masalan, holat qiymatiga qarab matn rangining o‘zgarishi yoki ma'lum qatorning ta'kidlash yoki sarlavhada alohida fon rangining qo‘llanilishi kabi brauzerda ko‘rinadigan vizual elementlar Excelda ham saqlanishi kerak edi.
Dastlab, ag-Grid tomonidan taqdim etilgan exportDataAsExcel() metodini chaqirsak, ekranda bir xil natija yaratiladi deb o‘yladim. Ammo aslida, brauzerning render qilish usuli va Excel Exportning ishlash usuli bir-biridan farq qilib, stil saqlanmasdi. Buni hal qilish uchun boshdan kechirgan sinov va xatolarimni va yechim jarayonini bo‘lishmoqchiman. Ushbu maqola ag-Grid v28.0.2 muhitiga asoslangan bo‘lib, versiyaga qarab ba'zi ishlash yoki qo‘llab-quvvatlash funksiyalari o‘zgarishi mumkin.
2. Ekran va Excel ma'lumotlari orasidagi farq: `valueFormatter` qo‘llanilmagan
[Muammo vaziyati]
Ba'zi ustunlar ma'lumotlar bazasidan olingan asl qiymatlar o‘rniga foydalanuvchining o‘qishiga qulay bo‘lishi uchun `valueFormatter` orqali o‘zgartirilgan matnni ekranda ko‘rsatmoqda.
Bu holatda Excel chiqishini amalga oshirganimizda, ekranda 'tasdiqlangan' deb ko‘rinadigan ma'lumot Excel fayl ichida asl ma'lumot 'Y' sifatida chiqdi.
[Yeçim usuli]
ag-Gridning Excel Export variantlaridan `processCellCallback`dan foydalanib, Excel faylida hujayra qiymatini chop etishdan oldin valueFormatter qo‘llanilgan oxirgi matnni qaytaradigan qiymatni tayyorlash uchun qo‘shimcha kolbek lojiqini kiritdik.
Ushbu jarayon orqali ichki ma'lumot kalit qiymati o‘rniga foydalanuvchining ekranda ko‘rgan intuitiv matnini Excelga saqlay olish imkoniyatiga ega bo‘ldik.
3. CSS ning Excelga to‘g‘ridan-to‘g‘ri qo‘llanmasligi sababi
[Muammo vaziyati]
Brauzerda ma'lum shartlar bo'lganida hujayraning matn rangini qizil rangga o'zgartirish uchun quyidagi `cellClass` sozlamasidan foydalandim.
Ekranda CSS skripti (`.text-red { color: red; }`) tomonidan to'g'ri ishlagan bo'lsa-da, yuklab olingan Excel faylida hech qanday uslub qo'llanilmadi.
[Sabab tahlili]
ag-Gridning Excel Export mexanizmi brauzerning render qilingan CSS muhitini o'qiy olmaydi. Buning o'rniga Excel'ga xos XML uslub formatiga aylantirish uchun ichki ob'ekt `excelStyles` massiviga murojaat qilib, uslublarni qurish strukturasidir.
Ya'ni, ekranda ishlatiladigan CSS faqat Excel uslubi avtomatik ravishda aks ettirilmagan. Bu muammoni hal qilish uchun excelStyles va hujayra klasslari o'rtasidagi bog'lanish usulini qo'lladik, buning jarayoni keyingi bo'limda tushuntiriladi.
4. excelStyles va cellClass, cellClassRules bilan bog'lanish strukturası
[YeChim usuli]
Muammoni hal qilish maqsadida Grid ichida umumiy foydalanadigan `excelStyles` sozlamasini e'lon qildim. Asosiy narsa CSS klass nomlari va `excelStyles`ning id sini 1:1 formatida bog'lashdir.
[Bilgan narsalar]
Versiya 28.0.2 da `cellClass` funksiyasi orqali qaytarilgan klass nomi yoki `cellClassRules` tomonidan qondirilgan va faollashtirilgan klass nomi oxir-oqibatda hujayraga berilgan klass satri excelStylesning id'siga mos kelganda, Excel mexanizmi buni avtomatik ravishda tan oladi. Shukurki, shrift ranglari, qalinlik kabi xususiyatlar to'g'ri kodlanadi va ekran CSS strukturasini Excel stil strukturasiga mos ravishda birlashtirish mumkin bo'ldi.
5. Header uslubini qo'llash jarayoni va maxsus o'ziga xos ID (header)
[Muammo holati]
Header maydoni uslubini yaratish jarayonida ham kutmagan muammoga duch keldim. Avvaliga oldin muvaffaqiyatli bo'lgan oddiy Hujayra usuli bilan bir xil ravishda maxsus uslub ID sini belgilab, bog'lash kerak deb o'ylagandim.
Ekran CSS normal ishladi, lekin Excelni yuklab olganda, sarlavhada hech qanday uslub qo'llanilmaganini ko'rdim. Dastlab, bu oddiy yozuv xatosi yoki sozlashdagi xato deb o'ylab, kodni bir necha bor tasdiqlash va sinovdan o'tkazishni takrorladim, lekin natijalar bir xil edi.
[Sababni tahlil qilish va yechish]
Rasmiy hujjatda ag-Grid'ning Excel Export dvigatelida sarlavha maydoni juda maxsus tarzda ishlov berilishi haqida ma'lumot topdim. Sarlavha rivojlantiruvchi tomonidan belgilangan xohishiga ko'ra o'rnatuvchi IDni (`blue-header`) tan olmaydi va ag-Grid ichki rezervatsiyalangan noyob ID bo'lgan `header` nomini majburiy ravishda strukturalashtirib ishlatadi.
Shu sababli, excelStyles sozlamasini ixtiyoriy ID o'rniga rasmiy spetsifikatsiyaga mos ravishda quyidagicha o'zgartirdim.
[O'rgangan narsalarim]
O'zgartirishdan so'ng, sarlavha uslubi Excel fayliga to'g'ri aks etishini tasdiqlash mumkin edi. Bu jarayon orqali oddiy hujayra maydoni va sarlavha maydoni ichki parchalanish dvigateli butunlay boshqacha mexanizmda ishlashini tushundim. Sarlavha uslubini boshqarayotganda, ixtiyoriy klassni bog'lashdan ko'ra, ramka tomonidan belgilangan ichki qoidalarni (`id: "header"`) amal qilish muhim edi.
Biroq, yuqoridagi ma'lumotlar ag-Grid v28.0.2 ga asoslangan, v29 dan yuqorida esa Excel Export ichidagi dvigatel tuzilishi bir oz o'zgartirilgan bo'lishi mumkin, shuning uchun rasmiy hujjatni ham ko'rib chiqishingizni tavsiya qilaman.
6. Yakun
Bu tajriba orqali faqatgina funksiyani amalga oshirishdan tashqari, kutubxonaning ishlash uslubini tushunish va loyiha sharoitlariga mos yechimlarni tanlash jarayonining ahamiyatini yana bir bor his qildim.
Manbalar va ma'lumotlar
* ag-Grid rasmiy hujjati – Excel Export: https://www.ag-grid.com/react-data-grid/excel-export/
* ag-Grid rasmiy hujjati – Excel Export Styles: https://www.ag-grid.com/react-data-grid/excel-export-styles/
* ag-Grid rasmiy hujjati – Hujayra uslublari (`cellClass`, `cellClassRules`): https://www.ag-grid.com/react-data-grid/cell-styles/
JJ