فتح ملف word داخل صفحة وكتابة فيه

دعنا نبدأ بذلك خطوة خطوة 

• اولا ف لتقم بانشاء واجهة برمجية تشبه ال word  لتحرير النصوص عبر ال html , css
• قم باستخدام ال javascript  للمساعدة في تنسيق البيانات مثل ال word و حفظها 

والان ساعطيك قائمة لمكتبات الجافا سكريبت التي ستساعدك على ذلك مع شرح مبسط عن كل واحدة ماطبيعة عملها يمكنك الدخول الى الموقع الرسمي الخاص بها وقراءة كيفية استخدامها

•  docxtemplater :  تسمح لك بإنشاء ملفات Word قابلة للتخصيص باستخدام قوالب قابلة للتحري
• jsPDF : تسمح لك بإنشاء ملفات PDF من HTML و CSS، والتي يمكن تحويلها لاحقًا إلى ملفات Word.
• html-docx-js : تسمح لك بإنشاء ملفات Word من HTML بسيطة، ولكنها قد تكون أقل قابلية للتخصيص.
• officegen : تسمح لك بإنشاء مستندات Microsoft Office بما في ذلك ملفات Word، و Excel، و PowerPoint.

بعد الاطلاع عليهن يمكنك اختيار التي تتناسب مع متطلبات مشروعك وتنصيبها واستعمالها بداخله

ساعطيك بعض امثلة عن اكواد الجافا سكريب من مكتبة  docxtemplater وكيف تقوم بربطها مع ملف ال html  ثم ستقوم بعمل ما تبقى بنفس الطريقة 

فرضا تريد انشاء قائمة مرتبة ف سيتم ذلك كالتالي :

• اولا في ملف ال html سنضع الكود التالي 

•  <h1>Ordered List Example</h1>
      <ol id="orderedList">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
      </ol>
  
      <button onclick="createWordDocument()">Create Word Document</button>

  ولا تنسى استدعاء مكتبة docxtemplater في اسفل الملف 

<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.29.0/docxtemplater.js"></script>

• الان سنأخد الدالة createWordDocument() التي وضعناها في حدث الضغط على الزر وال المعرف orderedList الذي حددناه في القائمة ولنعمل عليهن في ملف ال js 

function createWordDocument() {
    const doc = new docx.Document();
    const orderedList = document.getElementById('orderedList');

    for (let i = 0; i < orderedList.children.length; i++) {
        const itemText = orderedList.children[i].textContent;
        doc.addParagraph(new docx.Paragraph(itemText));
    }

    const exporter = new docx.LocalPacker(doc);
    exporter.save("example.docx");
}

دعنا الان نشرح الكود الذي كتبناه 

function createWordDocument() { 

هنا يبدأ تعريف الدالة createWordDocument التي ستنشئ مستند Word

const doc = new docx.Document(); 

هذا السطر  ينشئ متغيرًا doc لتخزين المستند الجديد

const orderedList = document.getElementById('orderedList');

 يبحث عن العنصر في الصفحة HTML الذي يحتوي على القائمة المرتبة ويخزنه في متغير orderedList

for (let i = 0; i < orderedList.children.length; i++) {

يبدأ حلقة تكرار تمر على كل عنصر في القائمة المرتبة

const itemText = orderedList.children[i].textContent; 

 يحصل على نص العنصر الحالي في القائمة المرتبة ويخزنه في متغير itemText

doc.addParagraph(new docx.Paragraph(itemText));

 يضيف فقرة جديدة إلى المستند الجديد تحتوي على نص العنصر الحالي

} 

هنا تنتهي حلقة التكرار بعد مرورها على جميع عناصر القائمة المرتبة

const exporter = new docx.LocalPacker(doc); 

ينشئ محولًا exporter لتحويل المستند إلى ملف Word

exporter.save("example.docx"); 

 يحفظ المستند الجديد كملف Word بالاسم "example.docx"

الامر ليس بالسهل جدا هو بمثابة عمل برنامج جديد تقريبا ولكن لا مشكلة يمكنك عمل الاصناف التي تريدها فقط , كما اتمنى ان تكون الفكرة وصلت وتم ايضاحها 

وبالتوفيق لك ...

بارك الله فيك علي الرد انا اقصد عندما اضغط علي زر يظهر ملف ورود مرفق اكتبه فيه امام الفراغات  وابعته لشخص اخر 

ر.docx

اخبرتك قبل ذلك انك تستطيع فعل ذلك بواسطة مكتبة Docxtemplater ولكن لا مشكلة دعنا نفعل ذلك معا من جديد بطريقة ابسط ومقتصرة على ما تريده 

• قم بحفظ ملف ال word  الذي قمت بارفاقه بصيغة DOTX اي ك ملف قالب لنقم باستخدامه  ك نموذج
• قم بتضمين مكتبة Docxtemplater في مشروعك 

والان دعنا نفعل ذلك عن طريق الكود 

• قم بانشاء كبستين الاولى لفتح الملف والاخرى لحفظه واغلاقه 

 <button id="openWordDoc">فتح الملف </button>
 <button id="saveWordDoc">حفظ الملف </button>

ولا تنسى تضمين رابط المكتبة ايضا 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.26.0/docxtemplater.js"></script>

ثم قم باضافة هذا الكود في ملف الجافا سكريبت 

      const templateFileUrl = 'path/filename.dotx';
        const doc = new Docxtemplater();
        doc.load(templateFileUrl);

        doc.setData({
            Name_Project: 'Project Name',
            desc_Project: 'Project Description',
            Target_Project: 'Project Goals',
            Tools_Project: 'Project Tools'
        });

        doc.render();

        const blob = doc.getZip().generate({ type: 'blob' });

        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'filled_document.docx';

        // Open the download link when the button is clicked
        document.getElementById('openWordDoc').addEventListener('click', () => {
            downloadLink.click();
        });

        document.getElementById('saveWordDoc').addEventListener('click', () => {
            const formData = new FormData();
            formData.append('file', blob);

            fetch('save_document.php', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    console.log('Document saved successfully');
                } else {
                    console.error('Failed to save document');
                }
            }).catch(error => {
                console.error('Error saving document:', error);
            });
        });

بهذه الطريقة نستطيع تحقيق المطلوب  والان دعني اشرح لك ما المقصود من الكود 

const templateFileUrl = 'path//filename.dotx';
const doc = new Docxtemplater();
doc.load(templateFileUrl);

هذا الجزء يقوم بتعريف المتغير templateFileUrl الذي يحتوي على مسار  ملف القالب (DOTX). ثم ينشئ كائن doc من فئة Docxtemplater ويقوم بتحميل ملف القالب باستخدام الدالة load()

doc.setData({
    Name_Project: 'Project Name',
    desc_Project: 'Project Description',
    Target_Project: 'Project Goals',
    Tools_Project: 'Project Tools'
});

 هذا الجزء خاص ب تعبئة بيانات المشروع داخل الملف القالب. يتم ذلك باستخدام دالة setData() التي تأخذ كمدخل كائن يحتوي على البيانات المطلوبة. تُمثل المفاتيح في الكائن الأسماء التي يجب ملؤها في الملف القالب، بينما تمثل القيم البيانات الفعلية

doc.render();

هذا السطر يقوم بعملية التقديم (render) للملف القالب بعد تعبئته بالبيانات. يقوم هذا بتوليد نسخة جديدة من الملف مع البيانات المحددة مُدرجة في الأماكن المناسبة.

const blob = doc.getZip().generate({ type: 'blob' });

هذا الجزء يقوم بتحويل الملف إلى كائن Blob (Binary Large Object)، الذي يُمثل ملفًا ثنائي الكبير.

const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'filled_document.docx';

هنا، يتم إنشاء عنصر a (رابط) جديد باستخدام document.createElement('a'). يتم تعيين خاصية href لتحتوي على رابط URL للكائن Blob الذي تم إنشاؤه سابقًا. يتم تعيين خاصية download لتحديد اسم الملف عند التنزيل.

document.getElementById('openWordDoc').addEventListener('click', () => {
    downloadLink.click();
});

يضاف هذا المستمع للحدث إلى الزر "Open Fillable Word Document". عند النقر على هذا الزر، سيتم تنفيذ الكود داخل الوظيفة المرفقة، والتي في هذه الحالة تشغيل عنصر الرابط الذي يسمح بتنزيل الملف.

document.getElementById('saveWordDoc').addEventListener('click', () => {
    const formData = new FormData();
    formData.append('file', blob);

    fetch('save_document.php', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            console.log('Document saved successfully');
        } else {
            console.error('Failed to save document');
        }
    }).catch(error => {
        console.error('Error saving document:', error);
    });
});

هذا الجزء يضيف مستمع حدث للزر "Save Filled Word Document". عند النقر على هذا الزر، سيتم تنفيذ الكود داخل الوظيفة المرفقة. يتم إنشاء كائن FormData لتعبئة البيانات التي سترسل إلى الخادم

وبالتوفيق لك ..

انا اريد كلام الذي يتم كتابته داخل word  يتم حفظه في قاعدة البيانات 

انا ملف وضعته علي سطح مكتب هل مسار صحيح مكتوب في صورة 

ممكن ترفق لي مثلا يوضح دلك لانه والله ما عرفت كيف 

اقصد ملفات برمجة

عذرا على التأخير بالرد , نعم المسار صحيح ان كان هذا هو مسار الملف على حاسوبك بالفعل 

اما بالنسبة للكود الذي يحفظ بيانات ال word  في قاعدة البيانات فهو هذا وهو مرفق بالاجابة السابقة 

fetch('save_document.php', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            console.log('Document saved successfully');
        } else {
            console.error('Failed to save document');
        }
    }).catch(error => {
        console.error('Error saving document:', error);
    });

هذا الكود يستخدم الدالة fetch  لإرسال بيانات من المتصفح إلى الخادم. في هذه الحالة، يتم إرسال ملف Word المعبأ بالبيانات إلى ملف PHP يُدعى save_document.php على الخادم. بعد إرسال الملف، يُطبع رسالة تفيد بنجاح العملية في وحدة التحكم (console) إذا تم حفظ الملف بنجاح، وإلا ستُطبع رسالة بفشل العملية

وبالتوفيق لك ...

انا لا استخدام لارافل ولا api  انا  php mysqli   ياريت تعملي لي حل مشكلة وترفقي لي ملفات اختي الكريمة وبارك الله فيك