elementUI+Springbootを使用してExcelエクスポート機能を実装する方法

手順

依存関係パッケージ

まず、vue依存関係パッケージを導入する必要があります
私はこれを使用します

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

そのうちのxlsx依存関係の機能は次のとおりです: データを Excel ワークブックに処理します
ファイルセーバー依存関係の機能は次のとおりです: ファイルを保存しエクスポートします

要素テーブル

ここでは実際にelemenetUIのtableタグを利用してデータを取得しているので、テーブルにセレクターを追加する必要があります。
私のプロジェクトでは、id :#を追加しました。 ##exportExcel

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

tableData はバックエンドからデータを受け取るカスタム変数です

パッケージを紹介します

次に、エクスポート関数を記述する必要があるときページが紹介されています

詳細は以下のとおりです。

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

書き方

以下のコードには、

var xlxsParam = { raw: true };

とあります。この機能は、 data

主な目的は、日付などのデータが処理されて表示エラーが発生するのを防ぐことです

    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "文件名称.xlsx"
        );
      } catch (e) {
      // 捕捉报错
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      // 将结果返回出来，导出文件
      return wbOut;
    },

完全な例

完全な例は次のとおりです:

<!--页面-->
<template>
  <div>
  <!--导出按钮-->
  <el-button type="primary" @click="exportExcelData()">导出</el-button>
  <!--table数据-->
      <el-table :data="tableData" id="exportExcel" border >
      <el-table-column
        label="字段1"
        type="字段名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="字段2"
        label="字段名称"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
<template>
<!--逻辑-->
<script>
// 引入依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "newStaffRecord",
  data() {
    return {
      tableData: [], // 接收的后端数据变量
    };
  },
  methods: {
	    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "新人培训记录.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      return wbOut;
    },
	}
}
</script>

最終的なエクスポート結果

私のプロジェクトでは、初心者トレーニング記録用のクエリとインポート機能を実装する必要があるため、最終的なインターフェイスのスタイルは次のようになります

#実際のエクスポート結果は次のとおりです:

プライバシーを維持するために、名前データを削除しました

#

以上がelementUI+Springbootを使用してExcelエクスポート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。