So verwenden Sie elementUI+Springboot zum Exportieren von Excel-Funktionen

Schritte

Abhängigkeitspaket

Zuerst müssen wir das Abhängigkeitspaket von vue einführen
Ich verwende dieses

npm install xlsx@^0.16.0
npm install file-saver@^2.0.2

Die Rolle der xlsx-Abhängigkeit ist: Verarbeiten Sie die Daten in eine Excel-Arbeitsmappexlsx依赖的作用为：将数据进行处理为excel工作簿
file-saver依赖的作用为：将文件进行一个保存导出来

element表格table

这里，实际上是用的elemenetUI的表格table标签，获取到数据，因此，我们需要对表格添加一个选择器
在我的项目中，我是添加了一个id：exportExcel< Die Funktion der Abhängigkeit code>file-saver besteht darin, die Datei zu speichern und zu exportieren

Elementtabelle

Hier wird das Tabellen-Tag von ElementenetUI tatsächlich zum Abrufen der Daten verwendet. Daher müssen wir einen Selektor hinzufügen zur Tabelle

In meinem Projekt habe ich eine id hinzugefügt: exportExcel

<el-table :data="tableData" id="exportExcel" border ></el-table>

tableData ist eine benutzerdefinierte Möglichkeit, Daten von den Backend-Variablen zu empfangen

Stellen Sie das Paket vor

Importieren Sie sie dann auf der Seite, auf der Sie die Exportfunktion schreiben müssen. Die Details lauten wie folgt: Daten

Hauptsächlich soll verhindert werden, dass Daten wie Datumsangaben verarbeitet werden, was zu Anzeigefehlern führt

import XLSX from "xlsx";
import FileSaver from "file-saver";

Vollständiges Beispiel

Das vollständige Beispiel lautet wie folgt:

var xlxsParam = { raw: true };

Endgültige Exportergebnisse

In meinem Projekt muss ich etwas tun eine Abfrage- und Importfunktion für Trainingsaufzeichnungen für Anfänger. Der endgültige Schnittstellenstil sieht also so aus

Das tatsächlich exportierte Ergebnis ist:

Um die Privatsphäre zu wahren, habe ich die Namensdaten entfernt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie elementUI+Springboot zum Exportieren von Excel-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!