Excel へのフロントエンド エクスポート (Vue と React に共通)

注: これは純粋なフロントエンド データ処理を Excel に変換したものです。状況によっては、最後にファイル ストリームが生成された後、それをエクスポートする必要があります。

コードに直接移動します。

vue: まず、 スクリプト タグ に XLSX を導入します。

反応: 現在のページのフォルダーに XLSX を直接導入します

import XLSX from 'xlsx'

この方法を使用する前に、プロジェクトに XLSX ライブラリをインストールする必要があることに注意してください。次のコマンドを使用して、npm を介して XLSX ライブラリをインストールできます。

npm install xlsx --save

このメソッドを 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);
  }
}

このメソッドをクリックイベント内で実行することでテーブルのエクスポートが実現できます~

これは最も基本的なフォームのエクスポートです。ご質問がある場合は、以下からお問い合わせください。ブロガーはそれを見たら返信します