快捷導(dǎo)航

elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能的全過(guò)程

更新時(shí)間：2022年09月05日 10:15:27 作者：相與還

這篇文章主要介紹了elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對(duì)這個(gè)導(dǎo)出功能進(jìn)行一個(gè)匯總整理寫(xiě)出來(lái)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

在前面，我們其實(shí)已經(jīng)完成了elementUI+springboot的導(dǎo)入功能
springboot實(shí)現(xiàn)上傳并解析Excel過(guò)程解析
那么，現(xiàn)在也對(duì)這個(gè)導(dǎo)出功能進(jìn)行一個(gè)匯總整理寫(xiě)出來(lái)
其實(shí)，導(dǎo)出功能相對(duì)導(dǎo)入功能還是比較簡(jiǎn)單，本次不需要考慮到后端

步驟

依賴(lài)包

首先，我們需要引入vue的依賴(lài)包
我用的是這個(gè)

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

其中xlsx依賴(lài)的作用為：將數(shù)據(jù)進(jìn)行處理為excel工作簿
file-saver依賴(lài)的作用為：將文件進(jìn)行一個(gè)保存導(dǎo)出來(lái)

element表格table

這里，實(shí)際上是用的elemenetUI的表格table標(biāo)簽，獲取到數(shù)據(jù)，因此，我們需要對(duì)表格添加一個(gè)選擇器
在我的項(xiàng)目中，我是添加了一個(gè)id：exportExcel

<el-table :data="tableData" id="exportExcel" border style="width: 100%"></el-table>

tableData為自定義的接收后端傳過(guò)來(lái)的數(shù)據(jù)的變量

引入包

然后，在你需要編寫(xiě)導(dǎo)出功能的頁(yè)面，進(jìn)行引入
具體如下:

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

編寫(xiě)方法

以下代碼中，有一個(gè)

var xlxsParam = { raw: true };

這個(gè)的作用是不對(duì)數(shù)據(jù)進(jìn)行處理
主要目的是為了防止把日期這種數(shù)據(jù)處理掉，導(dǎo)致顯示出錯(cuò)

    // 導(dǎo)出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 從表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 獲取二進(jìn)制字符串作為輸出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象
          // Blob 表示的不一定是js的原生格式數(shù)據(jù)
          // File 接口基于Blob,
          // 返回一個(gè)新創(chuàng)建的Blob對(duì)象,其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 導(dǎo)出文件名稱(chēng)
          "文件名稱(chēng).xlsx"
        );
      } catch (e) {
      // 捕捉報(bào)錯(cuò)
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      // 將結(jié)果返回出來(lái)，導(dǎo)出文件
      return wbOut;
    },

完整實(shí)例

完整實(shí)例如下:

<!--頁(yè)面-->
<template>
  <div>
  <!--導(dǎo)出按鈕-->
  <el-button type="primary" @click="exportExcelData()">導(dǎo)出</el-button>
  <!--table數(shù)據(jù)-->
      <el-table :data="tableData" id="exportExcel" border style="width: 100%">
      <el-table-column
        label="字段1"
        type="字段名稱(chēng)"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="字段2"
        label="字段名稱(chēng)"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
<template>
<!--邏輯-->
<script>
// 引入依賴(lài)
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "newStaffRecord",
  data() {
    return {
      tableData: [], // 接收的后端數(shù)據(jù)變量
    };
  },
  methods: {
	    // 導(dǎo)出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 從表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 獲取二進(jìn)制字符串作為輸出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象
          // Blob 表示的不一定是js的原生格式數(shù)據(jù)
          // File 接口基于Blob,
          // 返回一個(gè)新創(chuàng)建的Blob對(duì)象,其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 導(dǎo)出文件名稱(chēng)
          "新人培訓(xùn)記錄.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      return wbOut;
    },
	}
}
</script>

最終導(dǎo)出結(jié)果

在我的項(xiàng)目需要做一個(gè)新人培訓(xùn)記錄查詢(xún)導(dǎo)入的功能，于是最終界面樣式為這樣

在這里插入圖片描述

實(shí)際導(dǎo)出后的結(jié)果為:

在這里插入圖片描述

為保持隱私，我把姓名數(shù)據(jù)去掉了

在這里插入圖片描述

結(jié)語(yǔ)

以上為elementUI實(shí)現(xiàn)導(dǎo)出功能的過(guò)程

到此這篇關(guān)于elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能的文章就介紹到這了,更多相關(guān)elementUI Springboot導(dǎo)出excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: