Cara menggunakan elementUI+Springboot untuk melaksanakan fungsi eksport excel

Langkah

Pakej pergantungan

Pertama, kita perlu memperkenalkan pakej pergantungan vue
Saya menggunakan ini

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

di mana peranan xlsx pergantungan ialah : Proses data ke dalam buku kerja excel
file-saverFungsi kebergantungan ialah: simpan dan eksport fail

jadual elemen

Di sini, elementenetUI sebenarnya digunakan tag jadual untuk mendapatkan data, oleh itu, kita perlu menambah pemilih
pada jadual dalam projek saya, saya menambah id: exportExcel

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

tableData ialah pembolehubah takrifkan sendiri yang menerima data daripada. bahagian belakang

Pakej pengenalan

Kemudian, pada halaman yang anda perlukan untuk menulis fungsi eksport, import
seperti berikut:

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

Kaedah penulisan

Dalam kod berikut, terdapat

var xlxsParam = { raw: true };

Fungsi ini bukan untuk memproses data
Tujuan utama adalah untuk menghalang data seperti tarikh daripada diproses, mengakibatkan ralat paparan

    // 导出
    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;
    },

Contoh lengkap

Contoh lengkapnya adalah seperti berikut:

<!--页面-->
<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>

Hasil eksport akhir

Dalam projek saya, saya perlu melakukan pertanyaan dan fungsi import untuk rekod latihan pemula, jadi Gaya antara muka akhir adalah seperti ini

Hasil eksport sebenar ialah:

Untuk mengekalkan privasi, saya meletakkan data nama Dibuang

Atas ialah kandungan terperinci Cara menggunakan elementUI+Springboot untuk melaksanakan fungsi eksport excel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!