Detaillierter Implementierungsplan für den Vue-Frontend-Export von Excel-Dateien

npm install -S vue-json-excel

importiere Vue von „vue“;
importiere JsonExcel aus „vue-json-excel“;

Vue.component("downloadExcel", JsonExcel);

<download-excel :data="json_data">
  Daten herunterladen
  <img src="download_icon.png" />
</download-excel>

lass json_fields = {
  // fieldLabel (Name der Tabellenüberschrift), attributeName (entsprechender Feldname)
  Feldbezeichnung: Attributname,
  // Verwenden Sie einen Callback, um die exportierten Daten anzupassen anotherFieldLabel: {
    Feld: anotherAttributeName,
    Rückruf: (Wert) => {
      gibt „formatierten Wert ${value}“ zurück;
    },
  },
};

lass json_data = [
    {
        Attributname: Wert1,
        anotherAttributeName: Wert2
    },
    {
        Attributname: Wert3,
        anotherAttributeName: Wert4
    }
];

<Download-Excel
  Klasse="btn btn-default"
  :Daten="json_data"
  :Felder="json_fields"
  worksheet="Mein Arbeitsblatt"
  name="dateiname.xls"
>
  Laden Sie Excel herunter (Sie können es mit HTML-Code anpassen!)
</download-excel>

<Vorlage>
    <div id="app">
        <excel herunterladen
            Klasse = "btn"
            :fetch = "Daten abrufen"
            :Felder = "json_Felder"
            :vorher-generieren = "Download starten"
            :before-finish = "Download beenden">
            Excel herunterladen
        </downloadexcel>
    </div>
</Vorlage>

<Skript>
importiere DownloadExcel aus „vue-json-Excel“;
importiere Axios von „Axios“;

Standard exportieren {
    Name: "App",
    Komponenten:
        Excel herunterladen,
    },
    Daten(){
        zurückkehren {
            json_felder: {
                'Vollständiger Name': 'Name',
                'Datum': 'Datum',
            },
        }
    }, //Daten
    Methoden:{
        asynchrones Abrufen von Daten () {
            const Antwort = warte auf axios.get(URL);
            gib response.data.holidays zurück;
        },
        startDownload(){
            alert('Laden anzeigen');
        },
        Download beenden(){
            alert('Laden ausblenden');
        }
    }
};
</Skript>

npm install -S xlsx
npm install -S xlsx-Stil

modul.exporte = {
	konfigurierenWebpack: {
    	Äußerlichkeiten: {
      		'./cptable': 'var cptable'
    	}
  	}
}

/**
 * erstellt von lwj
 * @file Export-Plugin-Paket */

importiere * als styleXLSX aus „xlsx-style“

/**
 * String in ArrayBuffer konvertieren 
 * @method Typkonvertierung* @param {String} [s] wordBook-Inhalt* @return {Array} binäres Stream-Array*/
Funktion s2ab(s) {
    lass buf = null;

    wenn (Typ des ArrayBuffer !== 'undefiniert') {
        buf = neuer ArrayBuffer(s.length);
        let view = neues Uint8Array(buf);

        für (sei i = 0; i != s.Länge; ++i) {
            Ansicht[i] = s.charCodeAt(i) & 0xFF;
        }

        Puffer zurückgeben;
    }

    buf = neues Array(s.Länge);

    für (sei i = 0; i != s.Länge; ++i) {

        //In Binärstrom konvertieren buf[i] = s.charCodeAt(i) & 0xFF;
    }

    Puffer zurückgeben;
}

/**
 * Option 1: Download mit URL.createObjectURL (unten optional)
 * Lösung 2: Laden Sie Dateien über das File-Saver-Plugin herunter * @method file download * @param {Object} [obj] Inhalt exportieren Blob-Objekt * @param {String} [fileName] Der herunterzuladende Dateiname ist der generierte Dateiname * @return {void}
 */ 
Funktion saveAs (Objekt, Dateiname) {
    let aLink = document.createElement("a");

    wenn (Typ von Objekt == 'Objekt' und Objekt Instanz von Blob) {
        aLink.href = URL.createObjectURL(obj); // Blob-Adresse erstellen}
    
    aLink.download = Dateiname;
    aLink.click();
    setzeTimeout(Funktion () {
        URL.revokeObjectURL(obj);
    }, 100);
}

/**
 * @method Datenexport Excel
 * @param {Object} [worksheets] Arbeitsblatt-Dateninhalt* @param {String} [fileName='ExcelFile'] Excel-Dateiname exportieren* @param {String} [type='xlsx'] Dateityp exportieren*/
Export-Standardfunktion export2Excel ({
    Arbeitsblätter, 
    Dateiname = "Excel-Datei",
    Typ = "xlsx"
} = {}) {

    let sheetNames = Object.keys(Arbeitsblätter);
    let Arbeitsmappe = {
        SheetNames: sheetNames, //Gespeicherte Arbeitsblattnamen Sheets: Arbeitsblätter
    };

    // Konfigurationselemente von Excel let wopts = {  
        bookType: Typ, // Generierter Dateityp bookSST: false, // Ob eine Shared String Table generiert werden soll. Die offizielle Erklärung ist, dass die Generierungsgeschwindigkeit abnimmt, wenn sie aktiviert ist, aber die Kompatibilität mit iOS-Geräten mit niedrigerer Version ist Typ: „binär“  
    }

    // versucht, die Arbeitsmappe zu schreiben
    let wbout = styleXLSX.write(Arbeitsmappe, wopts);
    lass wbBlob = neuer Blob([s2ab(wbout)], {
        Typ: „Anwendung/Oktett-Stream“
    });

    speichernUnter(wbBlob, Dateiname + '.' + Typ);
}

XLSX aus „xlsx“ importieren;
importiere export2Excel aus '@/assets/utils/export2Excel';

// JSON-Format let jsonTable = [{
    "sheet1id": 1,
    "Header 1": "Daten 11",
    "Header 2": "Daten 12",
    "Header 3": "Daten 13",
    "Überschrift 4": "Daten 14"
}, {
    "sheet1id": 2, 
    "Header 1": "Daten 21",
    "Header 2": "Daten 22",
    "Header 3": "Daten 23",
    "Überschrift 4": "Daten 24"
}];

// 2D-Array-Format let aoa = [
    ['sheet2id', 'Überschrift 1', 'Überschrift 2', 'Überschrift 3', 'Überschrift 4'],
    [1, 'Daten 11', 'Daten 12', 'Daten 13', 'Daten 14'],
    [2, 'Daten 21', 'Daten 22', 'Daten 23', 'Daten 24']
]

Funktion handleExportExcel () {
    
    // Verwenden Sie die integrierte Tool-Bibliothek von XLSX, um JSON in Tabellen zu konvertieren
    : Lassen Sie Arbeitsblatt1 = XLSX.utils.json_to_sheet(jsonTable);

    // Verwenden Sie die integrierte Tool-Bibliothek von XLSX, um aoa in ein Blatt zu konvertieren
    Lassen Sie Arbeitsblatt2 = XLSX.utils.aoa_to_sheet(aoa);

    // Excel-Tabellenstil festlegen worksheet1["B1"].s = { 
        Schriftart: 
            Gr.: 14, 
            fett: wahr, 
            Farbe: 
                rgb: "FFFFAA00"
            } 
        }, 
        füllen: { 
            Hintergrundfarbe: { 
                indexiert: 64 
            }, 
            fgFarbe: { 
                rgb: "FFFF00" 
            } 
        } 
    };

    // Zellen zusammenführen worksheet1["!merges"] = [{
        s: { c: 1, r: 0 },
        e: { c: 4, r: 0 }
    }];

    export2Excel({
        Arbeitsblätter:
            Blatt1: Arbeitsblatt1,
            Blatt2: Arbeitsblatt2
        }, // Excel-Daten exportieren, Schlüssel stellt den Arbeitsblattnamen dar, Wert stellt die Blattdaten des entsprechenden Arbeitsblatts dar, unterstützt den Export mehrerer Arbeitsblätter Dateiname: ‚Mein Excel‘, // Dateiname exportieren Typ: ‚xlsx‘ // Dateiexporttyp });
}