همیشه در برنامه های تحت وب مشاهده می کنید که مکانی برای import اطلاعات وجود داره و عموما هم فرمت دریافتی به صورت excel هست. این فرمت چون ساختار جدولی داره و عموم مردم هم با آن آشنا هستند، کمک میکنه تا بهتر اطلاعات دریافت کنیم.
اما مشکل کجاست؟ مشکل این که کاربران عموما الگوی مارو رعایت نمی کنند و یا در ستون ها اطلاعات نامعتبر زیادی وارد می کنند. مشکل بعدی این است که برنامه نویس هم تا سطرهایی که دارای اطلاعات معتبری است, عملیات خودش انجام میده و در آخر پیغام میده که ۱۶ سطر ثبت شد.
خلاصه اگر به کار این امکان بدیم که در همان بخش Front برنامه اعتبار سنجی انجام بده و تغییرات لازم هم بر روی سطرهاش داشته باشه.
من برای رفع مشکل به دنبال کتابخانه جاوااسکریپتی گشتم تا فایل اکسل در جدولی به کاربر نمایش بدم به همراه خطاهایی که ممکن بود در ورود اطلاعات داشته باشه و بعد امکانی فراهم کردم تا بتونه اصلاحاتی انجام بده تا در صورت مشکل، آنها رفع بشه.
کتابخانه SheetJS تمام امکاناتی که من لازم داشتم را داشت و به راحتی فایلهای اکسل به JSON تبدیل میکرد و برعکس آن.
میتونید برای مشاهده مثال کامل از این لینک استفاده کنید.
برای تبدیل فایل اکسل میتونید از نمونه کد زیر استفاده کنید
let fileReader = new FileReader(); fileReader. = function (event) { const data = event.target.result; const workbook = XLSX.read(data, { type: "binary" }); const rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[workbook.SheetNames[0]]); } fileReader.readAsBinaryString(file);
در اینجا ابتدای یک FileReader ایجاد میکنیم و اون در حالت readAsBinaryString فراخوانی میکنیم. در این وضعیت تایع آن فراخوانی میشود. و دست آخر اطلاعات به صورت JSON در متغیر rowObject ریخته میشود و میتوانید از آن استفاده کنید. اگر عنوان ستونها را به صورت انگلیسی وارد کنید، خروجی JSON مناسبی خواهید داشت.
میتونید خروجی نهایی را در یک جدول به کاربر نمایش دهید(به همراه تغییرات مورد نیاز و خطاهای) و از کاربر بخواهید تا مشکلات را در همان جدول رفع کند و بعد از اتمام کار، اطلاعات را برای سرور ارسال کنید و نتیجه نهایی را به یک چکباس سبز به کار نمایش دهید تا اینگونه دیگر خط پشتیبانی شرکت هم مشغول نمیشود و دیگر نیازی نیست زمان زیادی را برای پشتیبانی صرف کنید. و یا برای دیتاهای تکراری ثبت شده برای کاربر دلیل بیاورید.
اما برای تبدیل JSON به Excel
const ws = XLSX.utils.json_to_sheet(userImportConfirm); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "کاربران"); XLSX.writeFile(wb, "sheetjs.xlsx");
در اینجا userImportConfirm به صورت یک Object به کتابخانه مورد نظر ما ارسال میشود و XLSX.writeFile(wb, "sheetjs.xlsx") باعث دانلود آن به صورت اتوماتیک میشود.
این کتابخانه سرعت مناسبی دارد اما در اکسلهای حجیم کار کمی سخت میشود. محدودیت مرورگر را هم در نظر بگیرید
همیشه به یاد داشته باشید کاربرانی که از برنامه استفاده میکنند هیچگونه دانشی ندارند و باید برای آنها مسیر را گام به گام توضیح دهید و کمک کنید که از روندی منطقی پیروی کنند.
ممنون از زمانی که گذاشتید.