فایل‌های اکسل معمولاً برای سازماندهی و تحلیل داده‌ها استفاده می‌شوند. بسیاری از کسب‌وکارها، پژوهشگران و حرفه‌ای‌ها از اکسل برای ذخیره مقادیر زیادی اطلاعات ساختاریافته استفاده می‌کنند. با این حال، در برنامه‌های وب مدرن، اغلب نیاز به خواندن و نمایش داده‌های اکسل به صورت پویا وجود دارد، بدون اینکه کاربران مجبور باشند فایل را دانلود یا در یک برنامه صفحه‌گسترده باز کنند. در ادامه به آموزش نمایش فایل اکسل در جاوا اسکریپت همراه با کد می پردازیم.
جاوا اسکریپت، همراه با کتابخانه xlsx که توسط SheetJS توسعه یافته است، به ما این امکان را می‌دهد که این کار را به‌طور مؤثر انجام دهیم. این راهنما توضیحی جامع درباره نحوه استفاده از جاوا اسکریپت برای خواندن و نمایش فایل‌های اکسل در مرورگر ارائه می‌دهد. ما پیاده‌سازی‌های پایه و پیشرفته را پوشش خواهیم داد، از جمله مدیریت چندین شیت، پشتیبانی از مجموعه داده‌های بزرگ، صادرات داده‌های اصلاح‌شده به اکسل و بهبود تجربه کاربری با استایل‌دهی و تعاملات.
پیش‌نیازهای نمایش فایل اکسل در جاوا اسکریپت
قبل از شروع کدنویسی، اطمینان حاصل کنید که:
آشنایی پایه‌ای با HTML، CSS و جاوا اسکریپت دارید.
از یک ویرایشگر کد مانند VS Code، Sublime Text یا هر ویرایشگر دلخواه دیگر استفاده می‌کنید.
یک مرورگر وب مدرن (Chrome، Firefox، Edge و غیره) برای تست در اختیار دارید.
چرا باید از جاوا اسکریپت برای نمایش فایل‌های اکسل استفاده کنیم؟
به‌طور سنتی، فایل‌های اکسل با استفاده از نرم‌افزارهایی مانند Microsoft Excel، Google Sheets یا نرم‌افزارهای مشابه باز می‌شوند. اما با پیشرفت برنامه‌های وب، نمایش داده‌های اکسل مستقیماً در مرورگر مزایای زیادی دارد:
- راحتی کاربر: کاربران نیازی به دانلود فایل یا نصب نرم‌افزار اکسل ندارند.
- تعامل‌پذیری: می‌توانید داده‌ها را به‌صورت پویا فیلتر، مرتب و تغییر دهید.
- پشتیبانی از چندین پلتفرم: در دستگاه‌ها و سیستم‌عامل‌های مختلف کار می‌کند.
- ادغام سفارشی: داده‌ها را می‌توان به پایگاه‌های داده، APIها یا سایر مؤلفه‌های وب متصل کرد.
با در نظر گرفتن این مزایا، بیایید نحوه پیاده‌سازی این قابلیت را بررسی کنیم.
معرفی کتابخانه XLSX برای نمایش فایل اکسل در جاوا اسکریپت
کتابخانه xlsx که توسط SheetJS توسعه یافته است، یک کتابخانه قدرتمند جاوا اسکریپت است که امکان خواندن، نوشتن و تبدیل فایل‌های صفحه‌گسترده را فراهم می‌کند. این کتابخانه از فرمت‌های مختلف پشتیبانی می‌کند:
.xlsx(فرمت مدرن اکسل).xls(فرمت قدیمی اکسل).csv(مقادیر جداشده با کاما)
این کتابخانه سبک است و نیازی به پردازش سمت سرور ندارد، که آن را برای برنامه‌های سمت کاربر ایده‌آل می‌کند.
نصب کتابخانه XLSX
می‌توانید این کتابخانه را به یکی از روش‌های زیر به پروژه خود اضافه کنید:
1. استفاده از CDN (توصیه‌شده برای مبتدیان)
اضافه کردن تگ <script> زیر در فایل HTML شما، کتابخانه را از شبکه توزیع محتوا بارگیری می‌کند:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
2. نصب از طریق NPM (برای Node.js یا فریم‌ورک‌هایی مانند React، Vue، Angular)
اگر از یک فریمورک یا Node.js استفاده می‌کنید، می‌توانید بسته را از طریق NPM نصب کنید:
npm install xlsxسپس آن را در فایل جاوا اسکریپت خود وارد کنید:
const XLSX = require("xlsx");اکنون که کتابخانه آماده است، بیایید برنامه وب خود را ایجاد کنیم.
تنظیم ساختار HTML
برنامه پایه‌ای ما به کاربران اجازه می‌دهد که یک فایل اکسل آپلود کنند و سپس داده‌های آن در یک جدول HTML نمایش داده شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نمایش فایل اکسل</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<body>
<h2>آپلود و مشاهده فایل اکسل</h2>
<input type="file" id="upload" />
<table border="1">
<thead>
<tr id="headRow"></tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<script>
document.getElementById('upload').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(sheet);
const headRow = document.getElementById("headRow");
const tbody = document.getElementById("tbody");
headRow.innerHTML = "";
tbody.innerHTML = "";
for (const key of Object.keys(jsonData[0])) {
headRow.innerHTML += `<th>${key}</th>`;
}
jsonData.forEach(row => {
let rowHtml = "<tr>";
for (const key of Object.keys(row)) {
rowHtml += `<td>${row[key]}</td>`;
}
rowHtml += "</tr>";
tbody.innerHTML += rowHtml;
});
};
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
توضیح کد نمایش فایل اکسل در جاوا اسکریپت
- ورودی فایل: عنصر
<input type="file">به کاربران اجازه می‌دهد یک فایل اکسل را انتخاب کنند. - خواندن فایل: شی
FileReaderفایل را به‌صورت یک آرایه بایت خوانده و پردازش می‌کند. - تابع
XLSX.read():فایل را به یک شیworkbookتبدیل می‌کند. اولین شیت استخراج شده و به فرمت JSON تبدیل می‌شود. - نمایش داده‌ها: داده‌های JSON به‌صورت پویا در یک جدول HTML نمایش داده می‌شوند.
بهتر کردن استایل جداول:
body {
font-family: 'Vazirmatn';
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
text-align: left;
}
thead {
background-color: #f2f2f2;
}
thead th {
padding: 12px;
border: 1px solid #ddd;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:nth-child(odd) {
background-color: #fff;
}
td,
th {
padding: 12px;
border: 1px solid #ddd;
}
tbody tr:hover {
background-color: #f1f1f1;
}
در این راهنما، نحوه نمایش فایل‌های اکسل در یک صفحه وب با استفاده از جاوا اسکریپت و کتابخانه xlsx را بررسی کردیم. موارد زیر را پوشش دادیم:
- نحوه خواندن فایل اکسل با جاوا اسکریپت.
- تبدیل داده‌های اکسل به JSON.
- ایجاد پویا یک جدول HTML برای نمایش داده‌ها.
با ادغام این تکنیک‌ها در برنامه‌های وب خود برای نمایش فایل اکسل در جاوا اسکریپت ، می‌توانید تجربه کاربران را بهبود ببخشید و نمایش داده‌های تعاملی را ارائه دهید. همچنین می توانید در دوره ی آموزش HTML و CSS سایت ایوولرن ثبت نام کنید.