كيف يقوم JavaScript بإنشاء وتنزيل ملف CSV

يعد إنشاء ملفات CSV وتنزيلها باستخدام JavaScript جزءًا أساسيًا من علوم الكمبيوتر عند العمل مع مواقع الويب وقواعد البيانات. قد تكون هناك بعض الحالات عندما يكون لدى المستخدم بعض البيانات في المتصفح والتي تريد السماح له بتنزيل هذه البيانات. في هذه الحالة ، تساعد ملفات CSV المبرمج على استخدامها لتنزيل بيانات موقع الويب في شكل جدول. يستخدم المبرمجون تنسيق ملف CSV للمستخدمين لتنزيل بيانات موقع الويب. CSV هو نموذج بسيط وسهل لتخزين بيانات موقع الويب في شكل جدول. بمساعدة JavaScript ، يمكنك جمع البيانات من صفحة HTML وإنشاء ملف CSV أو أيضًا إنشاء البيانات يدويًا. يمكنك فتح ملف CSV في MS-Excel ومشاهدة البيانات الموجودة بداخله. تتطلب كل قاعدة بيانات تقريبًا ملفات CSV لنسخ البيانات احتياطيًا. لتصدير البيانات من موقع الويب ، يستخدم المبرمجون ملفات CSV. يمكن إنشاء ملفات CSV وتنزيلها باستخدام JavaScript. سيصف هذا الفصل كيفية تنزيل بيانات جدول HTML لموقع الويب في ملف CSV.

كيف يمكنك تنزيل ملف CSV؟

بمساعدة JavaScript ، يمكنك جمع البيانات من صفحة HTML في ملف CSV وتنزيلها بسهولة. استخدم برمجة JavaScript مع HTML لإنشاء البيانات وتنزيلها بتنسيق CSV.

سيوضح لك هذا الفصل كيف يمكنك تنزيل ملف CSV من العميل والخادم.

لماذا يحتاج ملف CSV؟

  • تقوم ملفات CSV بتخزين البيانات وعرضها في شكل جدول يسهل فهمه.
  • إنه سهل وبسيط الاستخدام والتنفيذ. لذلك ، يفضل المبرمجون CSV لتنزيل بيانات موقع الويب بتنسيق .csv.
  • لا يتطلب إنشاء وتنزيل مكتبات تابعة لجهات خارجية.
  • باستخدام أساليب ومعلمات JavaScript البسيطة ، يمكنك بسهولة استخدام ملف CSV في موقع الويب الخاص بك.

المثال التالي هو أحد أبسط الأمثلة لهذا الفصل لإنشاء وتنزيل ملف CSV.

التنفيذ

لإنشاء البيانات لملف CSV ، تحتاج فقط إلى إنشاء مصفوفة متعددة الأبعاد تحتوي على بيانات صفحة HTML. يمكنك إنشاء البيانات يدويًا لغرض التعلم بدلاً من أخذها من صفحة HTML مباشرة.

لهذا ، ستحتاج إلى إنشاء مصفوفة متعددة الأبعاد باستخدام JavaScript وتقديم القيم المختلفة يدويًا (مثل – Justin Bieber ، 24 ، Singer ، London كاسم ، Age ، Profession ، and City) لإنشاء ملف CSV.

راجع تنفيذ الكود لإنشاء وتنزيل ملف CSV.

قم بإنشاء وتنزيل ملف CSV

مثال 1

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

  1. <html>
  2. <head>
  3. <title> Download CSV file </title>
  4. </head>
  5. <script>
  6. //create CSV file data in an array
  7. var csvFileData = [
  8.    [‘Alan Walker’, ‘Singer’],
  9.    [‘Cristiano Ronaldo’, ‘Footballer’],
  10.    [‘Saina Nehwal’, ‘Badminton Player’],
  11.    [‘Arijit Singh’, ‘Singer’],
  12.    [‘Terence Lewis’, ‘Dancer’]
  13. ];
  14. //create a user-defined function to download CSV file
  15. function download_csv_file() {
  16.     //define the heading for each row of the data
  17.     var csv = ‘Name,Profession\n’;
  18.     //merge the data with CSV
  19.     csvFileData.forEach(function(row) {
  20.             csv += row.join(‘,’);
  21.             csv += “\n”;
  22.     });
  23.     //display the created CSV data on the web browser
  24.     document.write(csv);
  25.     var hiddenElement = document.createElement(‘a’);
  26.     hiddenElement.href = ‘data:text/csv;charset=utf-8,’ + encodeURI(csv);
  27.     hiddenElement.target = ‘_blank’;
  28.     //provide the name for the CSV file to be downloaded
  29.     hiddenElement.download = ‘Famous Personalities.csv’;
  30.     hiddenElement.click();
  31. }
  32. </script>
  33. <body>
  34. <h3> Click the button to download the CSV file </h3>
  35. <!– create an HTML button to download the CSV file on click –>
  36. <button onclick=“download_csv_file()”> Download CSV </button>
  37. </body>
  38. </html>حاول تنفيذ الكود أعلاه على الويب واحصل على الإخراج كما هو موضح في لقطة الشاشة أدناه:

انقر على هذا تحميل CSV زر لتحميل البيانات CSV إنشاؤها في هذا الملف وهذه البيانات CSV سيعرض على شبكة الإنترنت أيضا.

افتح ملف CSV الذي تم تنزيله

انظر إلى امتداد الملف الذي تم تنزيله ، والذي سيكون .csv . كمرجع ، افتح ملف CSV الذي تم تنزيله في MS-Excel وشاهد البيانات الموجودة بداخله. سنعرض لك الإخراج على كل من Excel و notepad بعد فتح ملف CSV. يمكنك أن ترى أن بيانات ملف CSV ستظهر في شكل جدول.

انظر أدناه لقطة الشاشة على MS-Excel لبيانات CSV. بخلاف ذلك ، لقد رأيت أننا قد عرضنا أيضًا بيانات CSV على متصفح الويب.

ملف CSV على MS-Excel

تصدير وتنزيل بيانات جدول HTML لصفحة الويب إلى ملف CSV

هناك طريقة أخرى لتنزيل بيانات موقع الويب بتنسيق ملف CSV. في بعض الأحيان ، تريد السماح للمستخدم بالسماح له بتنزيل بيانات موقع الويب بتنسيق ملف CSV. تمكن JavaScript المبرمج من استخدام طريقته المدمجة لتصدير بيانات موقع الويب (بيانات جدول HTML لموقع الويب) في ملف CSV ، والذي يمكن فتحه في MS-Excel.

مثال

في المثال التالي ، سنقوم بتصدير بيانات جدول HTML من صفحة الويب إلى ملف CSV وتنزيل ملف CSV هذا. سنضيف زرًا لتنزيل ملف بيانات CSV هذا بنقرة واحدة للمستخدم. عندما ينقر المستخدم على هذا الزر ، سيبدأ تنزيل البيانات بتنسيق ملف .csv.

  1. <html>
  2. <head>
  3. <title> Export HTML table Data to CSV using JavaScript </title>
  4. <style>
  5. *{
  6.      color:#2b2b2b;
  7.      font-family: “Roboto Condensed”;
  8. }
  9. table {
  10.      width:40%;
  11. }
  12. th {
  13.      text-align:left;
  14.      color:#4679bd;
  15. }
  16. </style>
  17. </head>
  18. <script>
  19. //user-defined function to download CSV file
  20. function downloadCSV(csv, filename) {
  21.     var csvFile;
  22.     var downloadLink;
  23.     //define the file type to text/csv
  24.     csvFile = new Blob([csv], {type: ‘text/csv’});
  25.     downloadLink = document.createElement(“a”);
  26.     downloadLink.download = filename;
  27.     downloadLink.href = window.URL.createObjectURL(csvFile);
  28.     downloadLink.style.display = “none”;
  29.     document.body.appendChild(downloadLink);
  30.     downloadLink.click();
  31. }
  32. //user-defined function to export the data to CSV file format
  33. function exportTableToCSV(filename) {
  34.    //declare a JavaScript variable of array type
  35.    var csv = [];
  36.    var rows = document.querySelectorAll(“table tr”);
  37.    //merge the whole data in tabular form
  38.    for(var i=0; i<rows.length; i++) {
  39.     var row = [], cols = rows[i].querySelectorAll(“td, th”);
  40.     for( var j=0; j<cols.length; j++)
  41.        row.push(cols[j].innerText);
  42.     csv.push(row.join(“,”));
  43.    }
  44.    //call the function to download the CSV file
  45.    downloadCSV(csv.join(“\n”), filename);
  46. }
  47. </script>
  48. <body>
  49. <!– create table and provide data inside it –>
  50. <table>
  51. <tr>
  52.     <th> Name </th>
  53.     <th> Profession </th>
  54.     <th> Age </th>
  55.     <th> Hobby </th>
  56. </tr>
  57. <tr>
  58.     <td> Cristiano </td>
  59.     <td> Hacker </td>
  60.     <td> 24 </td>
  61.     <td> Travelling, Sky-diving </td>
  62. </tr>
  63. <tr>
  64.     <td> Jenifer </td>
  65.     <td> Photographer </td>
  66.     <td> 22 </td>
  67.     <td> Cooking </td>
  68. </tr>
  69. <tr>
  70.     <td> Simon </td>
  71.     <td> Travelling-guide </td>
  72.     <td> 35 </td>
  73.     <td> Dancing, Gardening </td>
  74. </tr>
  75. <tr>
  76.     <td> Cristiano Ronaldo </td>
  77.     <td> Footballer </td>
  78.     <td> 29 </td>
  79.     <td> Singing </td>
  80. </tr>
  81. </table>
  82. <p><b> Click the Download CSV button to download the created data </b></p>
  83. <!– button to call the user-defined function to download CSV file data –>
  84. <button onclick=“exportTableToCSV(‘person.csv’)”> Export HTML table to CSV File </button>
  85. </body>
  86. </html>

انسخ الكود أعلاه واحفظه في ملف وقم بتنفيذه على الويب. ستحصل على الإخراج كما هو موضح أدناه في لقطة الشاشة على متصفح الويب الذي يحتوي على جدول HTML يحتوي على صفوف من البيانات:

انقر فوق الزر تصدير إلى جدول HTML إلى ملف CSV لتنزيل البيانات إلى تنسيق ملف CSV. سيتم تنزيل الملف باسم person.csv .

يمكنك فتح هذا الملف في MS-Excel للاطلاع على البيانات الموجودة بداخله. افتح الملف الذي تم تنزيله وشاهد المحتوى الموجود بداخله مثل محتوى جدول HTML على الويب.

اظهر المزيد
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات