كود HTML يربط ملف اكسل او CSV مع صفحة الويب

ماجد النجار · 1 مايو

هل فيه كود يربط ملف الاكسل مع صفحة الويب عن طريق JS واقدر ابحث واعدل من خلالها وتتعدل تلقائياً في الاكسل ؟

عبد الوهاب بومعراف · 1 مايو

نعم، يمكننا استخدام JavaScript لقراءة ملف Excel أو ملفات ال CSV من صفحة الويب وعرض البيانات على الصفحة أو تحريرها ومن ثم حفظ التغييرات مرة أخرى في الملف، هذا مثال على ذلك:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV Reader</title>
</head>
<body>
<input type="file" id="csvFileInput">
<table id="csvTable"></table>

<script>
document.getElementById('csvFileInput').addEventListener('change', function() {
  var file = this.files[0];
  var reader = new FileReader();

  reader.onload = function(event) {
    var csvData = event.target.result;
    var table = document.getElementById('csvTable');
    var rows = csvData.split('\n');
    
    table.innerHTML = ''; // Clear existing table data
    
    rows.forEach(function(row) {
      var columns = row.split(',');
      var tr = document.createElement('tr');
      
      columns.forEach(function(column) {
        var td = document.createElement('td');
        td.textContent = column;
        tr.appendChild(td);
      });
      
      table.appendChild(tr);
    });
  };

  reader.readAsText(file);
});
</script>
</body>
</html>

فهذه الشيفرة تتيح للمستخدم تحديد ملف CSV من خلال عنصر الإدخال <input type="file"> ثم يقوم بقراءة محتويات الملف وعرضها في جدول على الصفحة، لكن يمكنك تعديل هذا الكود ليتناسب مع ملف Excel بطريقة مشابهة، ولكن سيتطلب ذلك استخدام مكتبة JavaScript أخرى مثل SheetJS وهذا مكتبة sheetjs ومنها ستتمكن قراءة ملفات Excel بصيغة .xlsx.

Chihab Hedidi · 1 مايو

ربط ملف إكسل ليس بالأمر الصعب، بحيث يمكن عرض البيانات وتعديلها من خلال واجهة ويب وتتحديث ملف Excel تلقائيا، وهذا من خلال استخدام مكتبة SheetJS، والتي تتيح لك قراءة وكتابة ملفات Excel باستخدام JavaScript، وهذا مثال بسيط يوضح كيفية استخدام المكتبة لقراءة ملف Excel و التعديل عليه:

// تحميل مكتبة SheetJS
const XLSX = require('xlsx');

// تحميل ملف Excel
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const data = event.target.result;
        const workbook = XLSX.read(data, {type: 'binary'});
        
        // قراءة البيانات من ورقة العمل
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);
        
        // عرض البيانات في صفحة الويب
        console.log(jsonData);
    };
    reader.readAsBinaryString(file);
});

يمكنك دمج هذا الكود مع وظائف إضافية لعرض وتعديل البيانات وحفظها مرة أخرى إلى ملف Excel.

Hikmat Jaafer · 1 مايو

مرحباً ماجد,

يمكنك فعل ذلك باستخدام JQuery ومكتبة ExcelJs للتعامل مع ملفات Excel , سوف أقوم بتوضيح الأمر من خلال المثال التالي :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel Web Integration</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
</head>
<body>

<h1>Excel Web Integration</h1>

<input type="file" id="fileInput">
<button id="loadExcel">Load Excel</button>

<table id="excelTable" border="1">
  <!-- Excel data will be populated here -->
</table>

<script>
$(document).ready(function() {
  $("#loadExcel").click(function() {
    var file = document.getElementById('fileInput').files[0];
    var reader = new FileReader();
    
    reader.onload = function(e) {
      var data = new Uint8Array(e.target.result);
      var workbook = new ExcelJS.Workbook();
      
      workbook.xlsx.load(data).then(function() {
        var sheet = workbook.getWorksheet(1);
        var table = $('#excelTable');
        
        sheet.eachRow(function(row, rowNumber) {
          var rowData = '<tr>';
          row.eachCell(function(cell, colNumber) {
            rowData += '<td>' + (cell.value ? cell.value : '') + '</td>';
          });
          rowData += '</tr>';
          table.append(rowData);
        });
      });
    };
    
    reader.readAsArrayBuffer(file);
  });
});
</script>

</body>
</html>

لاحظ أنني قمت بتنفيذ الخطوات التالية :

أولاً قمت باستخراج الملف
ثم قمت بقراءته
بعدها قمت بتحميله
ثم قمت بتحليل محتواه
واخيراً قمت بعرضه في صفحة الويب.

ماجد النجار · 1 مايو

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

بمعنى ابغى الواجهة تكون هي كل تعاملي وليس الاكسل، ويكون الاكسل بس قاعدة بيانات.

وشكراً..

image.png.9ea78c982e5a3cdbb93d01f5544b5da9.png

Hikmat Jaafer · 1 مايو

هذا يتطلب استخدام تقنيات متقدمة مثل تخزين البيانات المؤقتة على الخادم أو استخدام قاعدة بيانات للحفاظ على البيانات وتحديثها. يمكن تحقيق هذا باستخدام تقنيات مثل AJAX لتحميل الملف وتواصل البيانات مع الخادم، واستخدام تقنيات الواجهة الأمامية مثل React أو Angular لتمثيل البيانات وتفاعل المستخدم معها.

سأقوم بتوضيح الأمر في المثال التالي , والذي سوف يقوم بتحميل ملف Excel مرة واحدة عند تحميل الصفحة، ثم عرض المحتوى والسماح بالتعديل عليه عبر الواجهة وحفظ التغييرات مباشرة في ملف Excel دون الحاجة لإعادة تحميل الملف و سأستخدم React لبناء واجهة المستخدم و Node.js كخادم. سأستخدم مكتبة xlsx لقراءة وكتابة ملفات Excel. وبفرض أنك قد قمت بتثبيت Node.js ومكتبة xlsx بالفعل :

بعد إنشاء مشروع react , سوف أقوم بتعديل محتوى ملف App.js كالتالي :

import React, { useState, useEffect } from 'react';

function ExcelEditor() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/loadExcel')
      .then(response => response.json())
      .then(data => {
        setData(data);
      });
  }, []);

  const handleChange = (rowIndex, colIndex, value) => {
    const newData = [...data];
    newData[rowIndex][colIndex] = value;
    setData(newData);
    fetch('/api/updateExcel', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ data: newData })
    });
  };

  return (
    <table>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, colIndex) => (
              <td key={colIndex}>
                <input
                  type="text"
                  value={cell}
                  onChange={e => handleChange(rowIndex, colIndex, e.target.value)}
                />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default ExcelEditor;

ثانياً , نقوم بإنشاء الخادم باستخدام Node.js وتوفير api التعديل على ملف Excel الذي قمت باستخدامه في تطبيق React , سوف بعد إنشاء مشروع Nodejs سوف أقوم بتعديل محتوى ملف server.js كالتالي :

const express = require('express');
const app = express();
const xlsx = require('xlsx');
const bodyParser = require('body-parser');

const workbook = xlsx.readFile('data.xlsx');
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = xlsx.utils.sheet_to_json(worksheet);

app.use(express.static('public'));
app.use(bodyParser.json());

app.get('/api/loadExcel', (req, res) => {
  res.json(jsonData);
});

app.post('/api/updateExcel', (req, res) => {
  const newData = req.body.data;
  const newWorkbook = xlsx.utils.book_new();
  const newWorksheet = xlsx.utils.aoa_to_sheet(newData);
  xlsx.utils.book_append_sheet(newWorkbook, newWorksheet, 'Sheet1');
  xlsx.writeFile(newWorkbook, 'data.xlsx');
  res.send('Updated successfully');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

بعدها نقوم بتشغيل الخادم من خلال تنفيذ التعليمة التالية في terminal :
```
node server.js
```
بعدها نقوم بتشغيل مشروع react وسنشاهد إمكانية تعديل ملف excel من خلال التطبيق :
```
npm start		
```

كود HTML يربط ملف اكسل او CSV مع صفحة الويب

السؤال

ماجد النجار

رابط هذا التعليق

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

5 أجوبة على هذا السؤال

Recommended Posts

عبد الوهاب بومعراف

رابط هذا التعليق

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

Chihab Hedidi

رابط هذا التعليق

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

Hikmat Jaafer

رابط هذا التعليق

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

ماجد النجار

رابط هذا التعليق

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

Hikmat Jaafer

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية