تحويل جدول من صفحة html إلى ملف إكسل

يمكنك تحقيق ذلك عن طريق الجافاسكريبت, الفكرة بسيطة:

1. أولاً يجب تحديد الأعمدة الرئيسية
2. يجب أن تقوم بالمرور على الصفوف صف صف وفي كل صف نقوم بإضافة قيمة الأعمدة الخاصة به
3. نقوم بإزالة المساافات الزائدة

وتلك عينة من شفرة برمجية تقوم بما تريده

    function init_excel_sheet(table_id, separator = ',') {
    var rows = document.querySelectorAll("table#"+table_id+" tr");
    console.log(document.querySelector(`.table`));
    console.log(rows);
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            data = data.replace(/"/g, '""');
            row.push('"' + data + '"');
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join('\n');
    var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
    var link = document.querySelector("#download_excel");
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
}

يمكن استخدام المكتبة tableToExcel.js حيث نتبع الخطوات:

• تضمين المكتبة عن طريق CDN

  <script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

   

• استخدام المكتبة كالمثال التالي، إنشاء زر تصدير:

  // زر لتصدير الجدول إلى ملف
  // يقوم باستدعاء الدالة exportReportToExcel
  <button id="btnExport" onclick="exportReportToExcel(this)">تصدير التقرير</button>

  ثم كتابة الدالة:

  function exportReportToExcel() {
    let table = document.getElementById("#table1"); // تحديد الجدول 
    // استخدام غرض من المكتبة لعمل التحويل اللازم
    TableToExcel.convert(table, { // 
      name: `export_file_1.xlsx`, // اسم الملف
      sheet: {
        name: 'Sheet x' // اسم الورقة
      }
    });
  }

   

أفضل إستعمال مكتبة الجيكيوري DataTable لذلك فهي توفر وصولا أبسط لمختلف الصيغ التي نحتاج التصدير إليها . 

يتم تضمين ملف الجافاسكربت الخاص بها كالتالي : 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>

ثم ملف التنسيقات الخاص بها : 

<link rel="stylesheet" href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css" />

و أخيرا تهيئة المكتبة على جدول معين , مضافا إليها خيارات توفير أزرار التصدير : 

$(document).ready( function () {
    $('#myTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'excel'
        ]
    });
} );

ستلاحظ ظهور زر تصدير أعلى الجدول , يمكنك الضغط على excel للتحصل على جدولك مصدرا بصيغة ملف excel , و سيتم ذلك على الفور .