Frontend-Export nach Excel (gemeinsam für Vue und React)

Hinweis: Dies ist die Konvertierung der reinen Front-End-Datenverarbeitung in Excel. Unter normal Unter bestimmten Umständen ist es erforderlich, dass wir den Dateistream exportieren, nachdem er am Ende generiert wurde.

Gehen Sie direkt zum Code:

vue: Führen Sie zuerst XLSX im Skript-Tag ein

reagieren: XLSX direkt in den Ordner der aktuellen Seite einführen

import XLSX from 'xlsx'

Bitte beachten Sie, dass Sie die XLSX-Bibliothek in Ihrem Projekt installieren müssen, bevor Sie diese Methode verwenden können. Sie können die XLSX-Bibliothek über npm mit dem folgenden Befehl installieren:

npm install xlsx --save

Definieren Sie diese Methode in js:

// 导出excel
exportData() {
  // 这里的this.dataExport表示要导出的数组数据（vue的写法）如果是react，只需把data赋值成要导出的数据的值就行。注意数据必须是数组类型
  const data = this.dataExport
  // 创建一个Excel文件对象
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(data);
  console.log("workbook",workbook);
  console.log("worksheet",worksheet);
  // 将worksheet添加到workbook中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将workbook转换为blob对象
  const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([wbout], { type: 'application/octet-stream' });
  // 下载Excel文件
  const fileName = '导出表格详情表.xlsx';
  if ('download' in document.createElement('a')) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
  } else {
    navigator.msSaveBlob(blob, fileName);
  }
}

Durch Ausführen dieser Methode im Click-Ereignis kann der Tabellenexport ~ realisiert werden

Dies ist der einfachste Formularexport. Wenn Sie Fragen haben, können Sie diese unten stellen! Blogger werden antworten, wenn sie es sehen