كيفية أنشاء برنامج بلغة الجافا سكريبت يقوم بكتابة النص داخل ملف نوع txt

Split Lang · 9 أبريل 2019

السلام عليكم اريد طريقة لأنشاء برنامج بلغة جافا سكريبت يقوم بكتابة الاسم البيانات المرسلة من form داخل ملف نوع txt وجزاكم الله خيرا .

وأعتقد أن هناك مكتبة تقوم بهذه الوظيفة لاكن لا يوجد شرح عنها لهذا لو تفضل أحدكم وقام بشرحها لنا لأني محتاجها بشكل ظروري وهذا هو رابط المكتبة =>

https://www.npmjs.com/package/fs-js

تم التعديل في 9 أبريل 2019 بواسطة Split Lang

Entesar Khaled · 10 أبريل 2019

أهلًا بك،

يمكنك حفظ بيانات HTML Form داخل ملف نصي بواسطة JavaScript بعدة طرق أحدهم المكته التي ذكرتها... في البداية ستحتاج لتنصيب node.js لإنشاء مشروع JavaScript بملف package.json فعال لإمكانية تحميل أي إضافات ومكتبات مثل fs-js... يمكنك بعدها إدخال شيفرة write المذكورة بتوثيق موقع المكتبة وإسم الملف النصي الذي ستدخلة كمعامل للدالة (بدل 'myfile' المذكور في التوثيق) سيُنشأ تلقائيًا إن لم يكن موجود فعليًا... البيانات التي ستدخل في الملف هي المعامل الثاني في الدالة ويمكنك تخزينة كمصفوفة بعد تنسيقها ببيانات الفورم من خلال (بدل'fx' المذكور في التوثيق) ستجد شرح أفضل لذلك في هذا الرابط

يمكن تأدية الغرض بشكل موجز إن أردت... من خلال إستخدام قوة دوال الdownload لJavaScript بشكل مباشر... أي عند الضغط على زر إرسال النموذج يتم تلقائيًا تحميل ملف نصي بالبيانات المدخلة كما في هذا المثال...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Store form data into text file</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </head>
<body>
 
        <form style="margin-top: 10%">

                <div class="form-group">
                    <label  >Full Name</label>
                    <input type="text" class="form-control" id="fullName"  placeholder="Enter Name">
                  </div>
    
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="email" placeholder="Enter email">
                </div>
               
                <button type="submit" class="btn btn-primary" onclick="saveTextAsFile()">Submit</button>
              </form>
        

 
<script type="text/javascript">
 
function saveTextAsFile()
{
    var data = [];

    data.push(document.getElementById('fullName').value);
    data.push(document.getElementById('email').value);
    
    var textToSave = data;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = "text.txt";
 
    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
 
    downloadLink.click();
}
 

</script>
 
</body>
</html>