كيفية عرض محتوى ملف excel ثابت في جافا سكربت

هناك مكتبة تدعى SheetJS بحيث يمكنك جلبها في صفحتك باستخدام الكود التالي 

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

ثم يمكنك إنشاء حقل رفع ملف الأكسل 

<input type="file" id="excel" />

وأسفل هذا الملف ، يتعين علينا إنشاء قسم لعرض بيانات ورقة Excel على صفحة الويب بتنسيق جدول HTML. 

<div id="excelData"></div>

بعد ذلك سنقوم بكتابة كود JavaScript ، لذلك أولاً قم بتخزين id رفع الملف في متغير.

const excelFile = document.getElementById('excel');

بعد ذلك ، يتعين علينا كتابة كود جافا سكريبت عند حدث التغيير ، لذلك عندما يكون المستخدم قد حدد ملفًا من الكمبيوتر المحلي باستخدام علامة الملف ، فيجب تنفيذ كود جافا سكريبت.

excelFile.addEventListener('change', (event) => {

});

تحت رمز حدث التغيير هذا أولاً نريد التحقق من تنسيق الملف المحدد هو .xls أو .xlsx. إذا لم يكن الملف المحدد ملف Excel ، فسيتم عرض خطأ على صفحة الويب ، وإذا كان الملف المحدد هو Excel ، فسيتم متابعة عرض بيانات ملف Excel على صفحة الويب.

if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
{
	document.getElementById('excelData').innerHTML = '<div class="alert alert-danger">فقط ملفات مسموحة </div>';
	excelFile.value = '';
	return false;
}

بعد التحقق من صحة الملف المرفوع ،نقوم بقراءة الملف الآن باستخدام كائن FileReader. هنا يجب قراءة الملف عن طريق تمرير كائن الملف باستخدام

event.target.files[0].

var reader = new FileReader();
reader.readAsArrayBuffer(event.target.files[0]);

إذا كان الملف المحدد هو ملف Excel مناسب ، فسنحتاج إلى تحويل ما حصلنا عليه من كائن FileReader إلى كائن Uint8Array عن طريق تمرير نتيجة Filereader إلى مُنشئ Uint8Array.

var data = new Uint8Array(reader.result);

بعد ذلك ، قمنا بتمرير بيانات Unit8Array هذه في دالة

XLSX.read();

وستقوم بإرجاع كائن مصنف Excel المحدد.

var work_book = XLSX.read(data, {type:'array'});

بعد الحصول على الكائن يتعين علينا بعد ذلك الحصول على اسم الورقة لملف Excel المحدد. حتى هنا ، سيعيد متغير SheetNames اسم الورقة بتنسيق مصفوفة.

var sheet_name = work_book.SheetNames;

بمجرد حصولنا على اسم الورقة ، نريد الآن الحصول على بيانات الورقة الأولى بتنسيق JSON ، حتى نتمكن من الحصول عليها من خلال دالة 

XLSX.utils.sheet_to_json();

بتمرير اسم الورقة الأول في المتغير الأول في الدالة 

var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

بمجرد حصولنا على بيانات الورقة الأولى بتنسيق JSON ، يتعين علينا بعد ذلك كتابة كود JavaScript وتحويل بيانات JSON إلى تنسيق HTML وعرضها لذلك سيعرض بيانات ملف Excel على صفحة الويب بتنسيق جدول HTML. 

if(sheet_data.length > 0)
{
	var table_output = '<table class="table table-striped table-bordered">';
  	for(var row = 0; row < sheet_data.length; row++)
  	{
     table_output += '<tr>';
		for(var cell = 0; cell < sheet_data[row].length; cell++)
      {
  if(row == 0)
  {
  table_output += '<th>'+sheet_data[row][cell]+'</th>';
  }
  else
  {
  table_output += '<td>'+sheet_data[row][cell]+'</td>';
  }
  }
  table_output += '</tr>';
}
table_output += '</table>';
document.getElementById('excelData').innerHTML = table_output;
}

بتاريخ 2 دقائق مضت قال بلال زيادة:

هناك مكتبة تدعى SheetJS بحيث يمكنك جلبها في صفحتك باستخدام الكود التالي 

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

ثم يمكنك إنشاء حقل رفع ملف الأكسل 

<input type="file" id="excel" />

وأسفل هذا الملف ، يتعين علينا إنشاء قسم لعرض بيانات ورقة Excel على صفحة الويب بتنسيق جدول HTML. 

<div id="excelData"></div>

بعد ذلك سنقوم بكتابة كود JavaScript ، لذلك أولاً قم بتخزين id رفع الملف في متغير.

const excelFile = document.getElementById('excel');

بعد ذلك ، يتعين علينا كتابة كود جافا سكريبت عند حدث التغيير ، لذلك عندما يكون المستخدم قد حدد ملفًا من الكمبيوتر المحلي باستخدام علامة الملف ، فيجب تنفيذ كود جافا سكريبت.

excelFile.addEventListener('change', (event) => {

});

تحت رمز حدث التغيير هذا أولاً نريد التحقق من تنسيق الملف المحدد هو .xls أو .xlsx. إذا لم يكن الملف المحدد ملف Excel ، فسيتم عرض خطأ على صفحة الويب ، وإذا كان الملف المحدد هو Excel ، فسيتم متابعة عرض بيانات ملف Excel على صفحة الويب.

if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
{
	document.getElementById('excelData').innerHTML = '<div class="alert alert-danger">فقط ملفات مسموحة </div>';
	excelFile.value = '';
	return false;
}

بعد التحقق من صحة الملف المرفوع ،نقوم بقراءة الملف الآن باستخدام كائن FileReader. هنا يجب قراءة الملف عن طريق تمرير كائن الملف باستخدام

event.target.files[0].

var reader = new FileReader();
reader.readAsArrayBuffer(event.target.files[0]);

إذا كان الملف المحدد هو ملف Excel مناسب ، فسنحتاج إلى تحويل ما حصلنا عليه من كائن FileReader إلى كائن Uint8Array عن طريق تمرير نتيجة Filereader إلى مُنشئ Uint8Array.

var data = new Uint8Array(reader.result);

بعد ذلك ، قمنا بتمرير بيانات Unit8Array هذه في دالة

XLSX.read();

وستقوم بإرجاع كائن مصنف Excel المحدد.

var work_book = XLSX.read(data, {type:'array'});

بعد الحصول على الكائن يتعين علينا بعد ذلك الحصول على اسم الورقة لملف Excel المحدد. حتى هنا ، سيعيد متغير SheetNames اسم الورقة بتنسيق مصفوفة.

var sheet_name = work_book.SheetNames;

بمجرد حصولنا على اسم الورقة ، نريد الآن الحصول على بيانات الورقة الأولى بتنسيق JSON ، حتى نتمكن من الحصول عليها من خلال دالة 

XLSX.utils.sheet_to_json();

بتمرير اسم الورقة الأول في المتغير الأول في الدالة 

var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

بمجرد حصولنا على بيانات الورقة الأولى بتنسيق JSON ، يتعين علينا بعد ذلك كتابة كود JavaScript وتحويل بيانات JSON إلى تنسيق HTML وعرضها لذلك سيعرض بيانات ملف Excel على صفحة الويب بتنسيق جدول HTML. 

if(sheet_data.length > 0)
{
	var table_output = '<table class="table table-striped table-bordered">';
  	for(var row = 0; row < sheet_data.length; row++)
  	{
     table_output += '<tr>';
		for(var cell = 0; cell < sheet_data[row].length; cell++)
      {
  if(row == 0)
  {
  table_output += '<th>'+sheet_data[row][cell]+'</th>';
  }
  else
  {
  table_output += '<td>'+sheet_data[row][cell]+'</td>';
  }
  }
  table_output += '</tr>';
}
table_output += '</table>';
document.getElementById('excelData').innerHTML = table_output;
}

 

شكرا اخي الكريم على اجابتك 

اخي كيف اذا كان ملف الاكسيل موجود عندي و اريد ان يكون هذا الملف ثابت مع الصفحة بمجرد دخول الى الصفحة يظهر الجدول 

بتاريخ 16 دقائق مضت قال Zx Zx2:

شكرا اخي الكريم على اجابتك 

اخي كيف اذا كان ملف الاكسيل موجود عندي و اريد ان يكون هذا الملف ثابت مع الصفحة بمجرد دخول الى الصفحة يظهر الجدول 

يمكنك من خلال الدالة fetch بحيث يمكنك تمرير الملف بهذا الشكل 

fetch('http://localhost:8080/public/filename.xlsx')
   .then(response => response.arrayBuffer())
   .then(buffer => {
         const xlsx = XLSX.read(new Uint8Array(data, {type: 'array'}));
         // هنا باقي الكود 
         
    })
    .catch(err => console.error(err));

ومن ثم تقوم بوضع باقي الكود الكامل الذي يحول بيانات ملف الأكسل إلى جدول في HTML .