Vue 導出excel 表格方法封裝

首先需要安裝導出excel所需的插件，不會的可以參考這篇文章 link.

1.建立檔案exportExcel.vue

<template>
	//導出按鈕名稱及格式
  <el-button
    size="small"
    type="primary"
    @click="handleClick"
    icon="el-icon-download"
    >{{name}}</el-button
  >
</template>

<script>
export default {
  props:{
    name:{// 按鈕名稱
        type:String,
        default:'導出'
    },
    exportList:{// 需要導出的資料清單
        type:Array,
        required: true,
        default:[]
    },
    type:{
        type:Number,
        default:1, //type=1 導出選中的清單，type=2 導出所有資料
    },
    tableHeader:{// 設定Excel表格的表頭 字段
         type:Array,
         required: true,
          default:[]
    },
    filterVal:{// 跟表格表頭對應的綁定的prop
         type:Array,
         required: true,
          default:[]
    },
    tableTitle:{// 導出表頭的名字
         type:String,
         required: true,
         default:'表格'
    },
  },
  methods: {
    handleClick(){
        this.$emit('clickButton')
		//視圖可能會不更新，這裡在外面套一層nextTick
        this.$nextTick(()=>{
          this.exportExcel()
        })
        
        
      },
    //定義導出Excel表格事件
    exportExcel() {
        if (this.exportList.length === 0) {
        this.$message({
          message: "請至少選擇一條需要導出的資料",
          type: "warning",
            });
            return;
        }
        let content='';
        if(this.type===1){
            content="該操作将導出選中的資料，是否繼續"
        }else if(this.type===2){
            content="該操作将導出全部資料，是否繼續"
        }
      this.$msgbox
        .confirm(content, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          //導出
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意這個Export2Excel路徑
            const tableHeader = this.tableHeader; // 設定Excel表格的表頭
            const filterVal =this.filterVal; // 跟表格表頭對應的綁定的prop

            let list = this.filterTableData(
              JSON.parse(JSON.stringify(this.exportList))
            ); // this.selectList為選中的要導出的資料，用filterTableData方法先處理一下資料格式(要進行深度拷貝，以免過濾的時候，影響頁面上展示的資料)，再存到list

            let data = this.formatJson(filterVal, list);
            export_json_to_excel(tableHeader, data,this.tableTitle); //最後一個是導出表格的名字
          });
        })
        .catch(() => {});
    },
    formatJson(filterVal, Data) {
      return Data.map((v) => filterVal.map((j) => v[j]));
    },
    //導出資料前對資料處理
    filterTableData(data) {
      this.$emit('filterTableData',data)
      return data;
    },
  },
};
</script>
           

2.使用元件

<template>
	//導出選中的清單
	<ExportExcel
	  @clickButton="exportPeopleScoreExcel"
	  @filterTableData="filterTableData"
	  :exportList="exportList"
	  :tableHeader="tableHeader"
	  :filterVal="filterVal"
	  :tableTitle="tableTitle"
	></ExportExcel>
	
	//導出所有資料
	//<ExportExcel
    //   name='導出全部'
    //   :type='2'
    //   @clickButton="exportAllData"
    //   @filterTableData="filterTableData"
    //   :exportList="exportList"
    //   :tableHeader="tableHeader"
    //   :filterVal="filterVal"
    //   :tableTitle="tableTitle"
    // ></ExportExcel>
</template>
           

<script>
export default {
	components: {  
    	 ExportExcel:()=>import ('@/components/exportExcel/Index')
     },
      data() {
	    return {
		      //導出表格所需字段
		      exportList: [],
		      tableHeader: [],
		      filterVal: [],
		      tableTitle: "",
		      exportAllDataList:[],
	    	};
  	},
     methods:{
     //定義導出人員成績Excel表格事件
    exportPeopleScoreExcel() {
      this.exportList=this.selectList;
      this.tableTitle='考試成績';
      this.tableHeader=["姓名",
              "用時(分鐘)",
              "分數",
              "開始時間",
              "結束時間",
              "成績等級",];
      this.filterVal= ["name",
              "spenttime",
              "fraction",
              "startdate",
              "enddate",
              "grade",];
    },
    //對資料格式進行處理 (可寫可不寫)
    filterTableData(data) {
      data.forEach((v) => {
        if (v.grade) {
          switch (Number(v.grade)) {
            case 1:
              v.grade = "不合格";
              break;
            case 2:
              v.grade = "及格";
              break;
            case 3:
              v.grade = "良";
              break;
            case 4:
              v.grade = "優";
              break;
            default:
              break;
          }
        }
      });
      return data;
    },
     }
}
</script>