اذهب إلى المحتوى
  • 0

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

ماجد النجار

السؤال

Recommended Posts

  • 0

نعم، يمكننا استخدام 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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

ربط ملف إكسل ليس بالأمر الصعب، بحيث يمكن عرض البيانات وتعديلها من خلال واجهة ويب وتتحديث ملف 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. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحباً ماجد,

يمكنك فعل ذلك باستخدام 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. أولاً قمت باستخراج الملف
  2. ثم قمت بقراءته
  3. بعدها قمت بتحميله
  4. ثم قمت بتحليل محتواه
  5. واخيراً قمت بعرضه في صفحة الويب.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

وشكراً..

image.png.9ea78c982e5a3cdbb93d01f5544b5da9.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

هذا يتطلب استخدام تقنيات متقدمة مثل تخزين البيانات المؤقتة على الخادم أو استخدام قاعدة بيانات للحفاظ على البيانات وتحديثها. يمكن تحقيق هذا باستخدام تقنيات مثل 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		

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...