ماجد النجار نشر 1 مايو أرسل تقرير مشاركة نشر 1 مايو هل فيه كود يربط ملف الاكسل مع صفحة الويب عن طريق JS واقدر ابحث واعدل من خلالها وتتعدل تلقائياً في الاكسل ؟ 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبد الوهاب بومعراف نشر 1 مايو أرسل تقرير مشاركة نشر 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. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Chihab Hedidi نشر 1 مايو أرسل تقرير مشاركة نشر 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. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hikmat Jaafer نشر 1 مايو أرسل تقرير مشاركة نشر 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> لاحظ أنني قمت بتنفيذ الخطوات التالية : أولاً قمت باستخراج الملف ثم قمت بقراءته بعدها قمت بتحميله ثم قمت بتحليل محتواه واخيراً قمت بعرضه في صفحة الويب. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ماجد النجار نشر 1 مايو الكاتب أرسل تقرير مشاركة نشر 1 مايو انا ابغى الويب يقراه على طول بدون ما يعطيني يخليني اختار الملف مع كل تحديث لصفحة الويب، بالإضافة ابغى اعدل عليه عن طريق الموقع نفسه ويسمع في الاكسل. بمعنى ابغى الواجهة تكون هي كل تعاملي وليس الاكسل، ويكون الاكسل بس قاعدة بيانات. وشكراً.. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hikmat Jaafer نشر 1 مايو أرسل تقرير مشاركة نشر 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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
ماجد النجار
هل فيه كود يربط ملف الاكسل مع صفحة الويب عن طريق JS واقدر ابحث واعدل من خلالها وتتعدل تلقائياً في الاكسل ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.