2021-10-15 純前端實現導出excel表格功能

場景描述：

      由於 el-table 表格展示的數據是存在storage中且要在表格的操作欄添加一個導出按鈕，所以這個功能只能由純前端的方式來實現

<el-table
  ref="table"
  :data="dataTable"
  hightlight-current-row
  border
  height="calc(100vh - 360px)"
  @selection-change="selectChangeData"
>
  <el-table-column align="center" type="selection" width="60" />
  <el-table-column align="center" label="序號" width="60">
     <template slot-scope="scope">
        <span>{{ scope.$index + 1 }}</span>
     </template>
  </el-table-column>
  <el-table-column align="center" label="操作" width="300">
     <template slot-scope="scope">
        <el-button type="text" @click.native.prevent="handleDel(scope.row, scope.$index, dataTable)">刪除</el-buttom>
        <el-button type="text" @click.native.prevent="exportExcel(scope.row)">導出</el-button>
     </template>
  </el-table-column>

  <template v-for="(item, index) in tableHeaders">
     <el-table-column v-if="item.visible" :key="index" show-overflow-tooltip align="center">
        // 這里是table的header欄 - 帶搜索框或者下拉選擇框的
        <template slot="header" slot-scope="scope">
           <div :key="scope.$index">{{ tableHeaders[index].label }}</div>
           <template v-if="item.queryType === 'input'">
              <el-input v-model="form[item.queryProperty]" :placeholder="'請輸入' + item.label"/>
           </template>
           <template v-else-if="item.queryType === 'select'">
              <el-select v-model="form[item.queryProperty]" placeholder="請選擇">
                 <el-option label="全部"></el-option>
                 <el-option v-for="_item in item.list" :key="_item.value" :label="_item.label" :value="_item.value"></el-option>
              </el-select>
           </tempalte>
        </template>

        <template>
           <span>{{item.formatter ? item.formatter(scope.row[item.prop]) : scope.row[item.prop]}}</span>
        </template>
     </el-table-column>
  </template>  

</el-table>


<script>
  export default{
    data(){
      return {
        tableHeaders:[
          {
            label:'姓名',
            prop:'name',
            visible: true,
            width: 120
            queryType: 'input'
          },
          {
            label:'性別',
            prop:'gender',
            visible: true,
            width:120,
            queryType:'select',
            queryProperty: 'gender',
            list: [
              {value:'0', label:'未知'}，
              {value:'1', label:'男'}，
              {value:'2', label:'女'}
            ]
            formatter:(row)=>{
              // 假設數據返回 0 ，1 , 2這種，就需要轉換成 男,女，未知, 就可以使用這種方法
              const gender = row.gender;
              const val = this.list.find((item) => item.value === gender.toString())
              return val ? val : '--';
            }
          },
          {
            label:'年齡',
            prop:'age',
            visible:true,
            width: 120,
            queryType:'',
          }
        ]
      }
    },
    methods:{
      handleDel(row, index, dataTable){
         this.$confirm('是否刪除',{
           confirmButtonText:'確定',
           cancelButtonText:'取消',
           type:'warning'
         }).then(()=>{
           dataTable.splice(index, 1);
           // 然后該存儲就存儲
           this.$message({
             type:'success',
             message:'刪除成功'
           })
         })
      },
      exportExcel(row){
         let str = `姓名, 性別, 年齡, 職業, 籍貫, 愛好, 身高...\n`;
         // 這一步的操作是因為 row 這行數據中有很多字段，然后這些字段我們並不需要也不用展示到頁面上的。
         const info = {
            name: row.name || '--',
            gender: row.gender ? this.handleGenderType(row.gender) : '--', // 這一步是為了把數據 0,1,2置換成對應的值 未知,男,女。
            age: row.age || '--',
            ... // 只取自己需要的字段
         }
         Object.keys(info).forEach(key => {
            str += `${info[key]}\t,`;
         })
        
         const url = `data:text/xlsx;charest=utf-8,\ufeff${encodeURIComponent(str)}`;
         // 通過a標簽實現
         const link = document.createElement('a');
         link.href = url;
         // 對下載的文件命名
         link.download = '導出文件名稱.xlsx';
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
      },
      // 處理枚舉類型對應的值
      handleGenderType(genderType){
        const genderTypeObj = ['未知','男','女'];
        return genderTypeObj[genderType];
      }
    }
  }
</script>

ok~~~, 到此，這個導出功能就完成啦~又get到了一個新技能，哈哈哈哈

 

參考鏈接：

       https://www.pianshen.com/article/505822742/