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/