React implementiert Import und Export von Excel-Dateien

Präsentationsschicht

Hier verwende ich die Upload-Komponente von antd

Zitieren Sie einen Teil des Antd-Codes

importiere { Button, Tabelle, Hochladen } von „antd“;

<Hochladen {...props} fileList={state.fileList}>
    <Button type="primary" >Excel-Import</Button>
</Hochladen>

<Button type="primary" onClick={handleExport}>Excel-Export</Button>

Geschäftsschicht

Lassen Sie uns zunächst die Arbeit analysieren:

• Excel-Importarbeit: Benutzer laden Excel-Tabellen hoch, konvertieren den Tabelleninhalt zur Backend-Verarbeitung in JSON-Objekte und das Backend speichert die Daten in der Datenbank;
• Excel-Export: Holen Sie sich die Daten im JSON-Format vom Back-End. Das Front-End konvertiert die Daten in ein Arbeitsmappenobjekt und konvertiert das generierte Objekt zum Herunterladen und Exportieren in eine Excel-Tabelle.

Hier sind die technischen Details

Kern-Plugin xlsx

Installieren Sie xlsx: npm install xlsx --save-dev


Stellen Sie hauptsächlich die verwendete Kern-API vor:

• XLSX.read(Daten,Typ) // Excel-Daten analysieren
• workbook.Sheets[workbook.SheetNames[0]] // Holen Sie sich das erste Blatt im Arbeitsmappenobjekt. Der Benutzer muss nur ein Blatt haben. Wenn Sie die Arbeitsmappe nicht verstehen, lesen Sie bitte die Erklärung unten.
• XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''}）// Konvertiert das Arbeitsmappenobjekt in ein JSON-Objektarray. Beachten Sie, dass der Standardwert leer ist, wenn defval nicht auf '' gesetzt ist.
• XLSX.utils.json_to_sheet(json) // JSON-Objekt in Arbeitsmappenobjekt konvertieren

// Arbeitsmappe verstehen:
{
    Blattnamen: ['Blatt1', 'Blatt2'],
    Blätter:
        // Arbeitsblatt
        'Blatt1': {
            // Zelle
            'A1': { ... },
            // Zelle
            'A2': { ... },
            ...
        },
        // Arbeitsblatt
        'Blatt2': {
            // Zelle
            'A1': { ... },
            // Zelle
            'A2': { ... },
            ...
        }
    }
}

Excel-Import

Kerncode:

const f = Datei;
Konstante Leser = neuer FileReader();
reader.onload = Funktion (e) {
    versuchen{
        const Daten = e.Ziel.Ergebnis;
        const workbook = XLSX.read(datas, {type: "binary",}); //Daten analysieren
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //Dies ist das erste Blatt in der Arbeitsmappe.
        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //Konvertiere das Arbeitsmappenobjekt in ein JSON-Objekt-Array handleImpotedJson(jsonArr) //Array-Verarbeitung message.success('Excel-Upload-Analyse erfolgreich!')
    }fangen(e){
      message.error('Falscher Dateityp! Oder Fehler bei der Dateianalyse')
    } 
};
reader.readAsBinaryString(f);

verstehen:

• Das FileReader-Objekt instantiiert das Dateiobjekt und verarbeitet es im Onload-Ereignis.
• XLSX.read analysiert Daten
• XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}) Konvertiert das analysierte Arbeitsmappenobjekt in ein JSON-Objekt

Excel-Export

Kerncode:

const downloadExcel = () => {
    const json = handleExportedJson(Daten)
    Konstante Blatt = XLSX.utils.json_to_sheet(json);
    openDownloadDialog(sheet2blob(sheet,"Sheet1"), "Datei.xls herunterladen")
}
const handleExportedJson = (array) =>{...} // JSON-Daten verarbeiten const openDownloadDialog = (url, saveName) =>{...} // Download öffnen const sheet2blob = (sheet, sheetName) =>{...} // In Blob-Typ konvertieren

verstehen:

• Holen Sie sich die verarbeiteten Daten im JSON-Format
• XLSX.utils.json_to_sheet(json) In ein Arbeitsmappenobjekt konvertieren
• sheet2blob(sheet,saveName) Wandelt ein Arbeitsmappenobjekt in einen Blob um
• openDownloadDialog erstellt eine Blob-Adresse und implementiert die Download-Aktion über das <a>-Tag

Excel-Export-Plugin (js-export-excel)

Warum habe ich den selbst implementierten Code nicht schon früher gepostet? Weil ich ein nützliches Plug-In gefunden habe. Der Code ist sehr einfach.

Kerncode:

// Datei direkt exportieren let dataTable = []; //Dateninhalt in Excel-Datei let option = {}; //Option repräsentiert Excel-Datei dataTable = data; //Datenquelle option.fileName = "Datei herunterladen"; //Excel-Dateiname console.log("data===",dataTable)
option.datas = [
    {
        sheetData: dataTable, //Datenquelle in Excel-DateisheetName: ‚Sheet1‘, //Name der Blattseite in Excel-DateisheetFilter: [‚id‘, ‚name‘, ‚belong‘, ‚step‘, ‚tag‘], //In Excel-Datei anzuzeigende SpaltendatensheetHeader: [‚Projekt-ID‘, ‚Projektname‘, ‚Unternehmen‘, ‚Projektphase‘, ‚Projekttag‘], //Kopfzeilenname jeder Spalte in Excel-Datei}
]
let toExcel = new ExportJsonExcel(option); //Excel-Datei generieren toExcel.saveExcel(); //Excel-Datei herunterladen

Das Obige ist die grundlegende Verwendung dieses Plug-Ins. Es unterstützt auch den Export von Blobs und die Komprimierung. Weitere Einzelheiten finden Sie auf der offiziellen Website, wo die Kernoptionen erläutert werden:

• Dateiname Name der Download-Datei (Standard: Download)
• Daten

/*Mehrere Blätter*/
/*Jedes Blatt ist ein Objekt */
[{
    sheetData:[], // datasheetName:'', // (optional) Blattname, Standard ist sheet1
    sheetFilter:[], // (optional) Spaltenfilter (funktioniert nur, wenn die Daten Objekte sind)
    sheetHeader:[] // Erste Zeile, Titel columnWidths: [] // (optional) Spaltenbreite, muss der Spaltenreihenfolge entsprechen}]

Browser-Unterstützung: IE 10+. Ich habe getestet, ob die Demo in Chrom, Safari und IE funktioniert.

Ergebnisse erzielen

Wenn Sie es immer noch nicht verstehen, können Sie sich den GitHub-Demo-Quellcode ansehen

Abschluss

Dies ist das Ende dieses Artikels über den Import und Export von Excel-Dateien mit React. Weitere relevante Inhalte zum Import und Export von Excel mit React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!