React में कुशल CSV फ़ाइल संचालन

कई वेब एप्लीकेशन्स में CSV (Comma Separated Values) फाइलों के साथ काम करना एक सामान्य आवश्यकता है। React, यूजर इंटरफेस बनाने के लिए एक लोकप्रिय JavaScript लाइब्रेरी होने के नाते, अक्सर CSV डेटा अपलोड को संभालने और इस डेटा को यूजर को प्रदर्शित करने की आवश्यकता होती है। यह लेख इसे पूरा करने के दो प्रभावी तरीकों का पता लगाता है: बिल्ट-इन FileReader API का उपयोग करना और मजबूत papaparse लाइब्रेरी का लाभ उठाना।

विषय-सूची

• React में CSV फाइलों को पढ़ने के लिए FileReader API का उपयोग करना
• React में CSV फाइलों को पढ़ने के लिए papaparse लाइब्रेरी का उपयोग करना

React में CSV फाइलों को पढ़ने के लिए FileReader API का उपयोग करना

FileReader API एक नेटिव ब्राउज़र फ़ीचर है जो फ़ाइल की सामग्री को अतुल्यकालिक रूप से पढ़ने की अनुमति देता है। हालांकि कार्यात्मक, इसे लाइब्रेरी का उपयोग करने की तुलना में अधिक मैनुअल CSV डेटा पार्सिंग की आवश्यकता होती है।

1. घटक की स्थापना:

फ़ाइल इनपुट एलिमेंट के साथ एक React घटक बनाकर शुरुआत करें:

import React, { useState } from 'react';

function CSVReader() {
  const [csvData, setCsvData] = useState([]);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const csvString = e.target.result;
        try {
          const csvArray = parseCSV(csvString);
          setCsvData(csvArray);
        } catch (error) {
          console.error("CSV पार्सिंग में त्रुटि:", error);
          // त्रुटि को उचित रूप से संभालें, उदाहरण के लिए, एक त्रुटि संदेश प्रदर्शित करें
        }
      };
      reader.onerror = () => {
        console.error("फ़ाइल पढ़ने में त्रुटि");
        //त्रुटि को उचित रूप से संभालें
      };
      reader.readAsText(file);
    }
  };

  const parseCSV = (csvString) => {
    const lines = csvString.split('n');
    const headers = lines[0].split(',');
    const data = lines.slice(1).map(line => {
      const values = line.split(',');
      return headers.reduce((obj, header, index) => {
        obj[header] = values[index];
        return obj;
      }, {});
    });
    return data;
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <table>
        <thead>
          <tr>
            {csvData.length > 0 && csvData[0] && Object.keys(csvData[0]).map(header => <th key={header}>{header}</th>)}
          </tr>
        </thead>
        <tbody>
          {csvData.map((row, index) => (
            <tr key={index}>
              {Object.values(row).map((value, i) => <td key={i}>{value}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CSVReader;

इस उदाहरण में फ़ाइल पढ़ने और CSV पार्सिंग के लिए त्रुटि संचालन शामिल है। ध्यान दें कि यह बुनियादी पार्सर एक साधारण CSV संरचना मानता है। जटिल फ़ाइलों के लिए अधिक मज़बूत हैंडलिंग आवश्यक है।

React में CSV फाइलों को पढ़ने के लिए papaparse लाइब्रेरी का उपयोग करना

papaparse एक व्यापक रूप से उपयोग की जाने वाली JavaScript लाइब्रेरी है जो CSV पार्सिंग को सरल बनाती है। यह विविध CSV स्वरूपों को संभालती है, जिसमें उद्धरण और एस्केपिंग वाले भी शामिल हैं, जिससे यह अधिक विश्वसनीय समाधान बन जाता है।

1. स्थापना:

npm या yarn का उपयोग करके papaparse स्थापित करें:

npm install papaparse

2. papaparse को लागू करना:

import React, { useState } from 'react';
import Papa from 'papaparse';

function CSVReaderPapaparse() {
  const [csvData, setCsvData] = useState([]);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      Papa.parse(file, {
        header: true,
        complete: (results) => {
          setCsvData(results.data);
        },
        error: (error) => {
          console.error('CSV पार्सिंग में त्रुटि:', error);
          // त्रुटि को उचित रूप से संभालें
        }
      });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <table>
        <thead>
          <tr>
            {csvData.length > 0 && csvData[0] && Object.keys(csvData[0]).map(header => <th key={header}>{header}</th>)}
          </tr>
        </thead>
        <tbody>
          {csvData.map((row, index) => (
            <tr key={index}>
              {Object.values(row).map((value, i) => <td key={i}>{value}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CSVReaderPapaparse;

यह CSV पार्सिंग के लिए Papa.parse का उपयोग करता है। header: true विकल्प स्वचालित रूप से पहली पंक्ति को हेडर के रूप में उपयोग करता है। complete कॉलबैक पार्स किए गए डेटा को प्राप्त करता है, जिसे तब स्थिति में अपडेट किया जाता है। त्रुटि संचालन भी शामिल है। यह दृष्टिकोण मैनुअल पार्सिंग की तुलना में स्वच्छ और अधिक मज़बूत है।

यह लेख React में CSV अपलोड को संभालने के दो तरीके प्रस्तुत करता है। जबकि FileReader विधि एक मौलिक समझ प्रदान करती है, papaparse अधिकांश वास्तविक दुनिया के परिदृश्यों के लिए अधिक कुशल और विश्वसनीय समाधान प्रदान करता है। उत्पादन वातावरण में हमेशा व्यापक त्रुटि संचालन को शामिल करना याद रखें।