elementUI+Springboot實現導出excel功能的全過程

Posted on by

前言

在前面，我們其實已經完成瞭elementUI+springboot的導入功能
springboot實現上傳並解析Excel過程解析
那麼，現在也對這個導出功能進行一個匯總整理寫出來
其實，導出功能相對導入功能還是比較簡單，本次不需要考慮到後端

步驟

依賴包

首先，我們需要引入vue的依賴包
我用的是這個

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

其中xlsx依賴的作用為：將數據進行處理為excel工作簿
file-saver依賴的作用為：將文件進行一個保存導出來

element表格table

這裡，實際上是用的elemenetUI的表格table標簽，獲取到數據，因此，我們需要對表格添加一個選擇器
在我的項目中，我是添加瞭一個id：exportExcel

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

tableData為自定義的接收後端傳過來的數據的變量

引入包

然後，在你需要編寫導出功能的頁面，進行引入
具體如下:

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

編寫方法

以下代碼中，有一個

var xlxsParam = { raw: true };

這個的作用是不對數據進行處理
主要目的是為瞭防止把日期這種數據處理掉，導致顯示出錯

    // 導出
    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 style="width: 100%">
      <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實現導出功能的過程

到此這篇關於elementUI+Springboot實現導出excel功能的文章就介紹到這瞭,更多相關elementUI Springboot導出excel內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：