Vue + js项目中，实现导出功能。

1.在common公共组件中，新建一个export.vue组件，其中内容如下

<template>
  <div class="rz-export">
    <div class="rz-title">导出内容</div>
    <el-checkbox-group v-model="checked">
      <el-checkbox style="margin-bottom:10px" v-for="(item, i) in exportConfig.tableList" :label="item.id" :key="i">
        {{ item.itemName }}
      </el-checkbox>
    </el-checkbox-group>
    <div class="rz-title">导出方式</div>
    <div>
      <img style="width:96px" v-for="(item, i) in imgList" :key="i" :src="getImgUrl(item)" />
    </div>
    <el-radio-group v-model="radioVal" class="rz-radio-group">
      <el-radio class="rz-radio-inp" v-for="(item, index) in exportConfig.typeList" :key="index" :label="index" />
    </el-radio-group>
  </div>
</template>

<script>
  import {
    cloneObj
  } from "@/utils/tools";
  export default {
    props: {
      exportConfig: {
        type: Object,
        default: function () {
          return {
            tableList: [], // 必填, 导出内容(表头)
            map: {}, // 必填, 导出接口所需参数
            fileType: "", // 必填, 导出接口所需参数
            typeList: ["excel"] // 选填, 导出方式类别, 默认只有excel
          };
        }
      }
    },
    data() {
      return {
        checked: [], // 选中内容
        radioVal: 0,
        defaultData: {
          typeList: ["excel"]
        }
      };
    },
    watch: {
      checked(now) {

        this.exportConfig.map = {};
        now.forEach((ele, index) => {
          const nowEl = cloneObj(this.exportConfig.tableList[index]);
          delete nowEl.id;
          delete nowEl.itemName;
          this.exportConfig.map = {
            ...this.exportConfig.map,
            ...nowEl
          };

        });

      },
      radioVal: {
        // 要监听的数据
        handler(now) {
          // 数据变化时触发的函数
          this.exportConfig.fileType = this.exportConfig.typeList ?
            this.exportConfig.typeList[now] :
            this.defaultData.typeList[now];
        },
        immediate: true // 是否立即以表达式的当前值触发回调
      }
    },
    computed: {
      imgList() {
        return this.exportConfig.typeList.map(ele => {
          switch (ele) {
            case "excel":
              return "leadExcel.png";
            case "pdf":
              return "leadPdf.png";
            case "word":
              return "leadWord.png";
            default:
              return "leadExcel.png";
          }
        });
      }
    },
    methods: {
      // 初始化
      init() {
        this.selectAll();
        this.formatData();
      },

      // 初始化参数
      formatData() {
        for (let prop in this.defaultData) {
          if (this.exportConfig[prop] == undefined) {
            this.exportConfig[prop] = this.defaultData[prop];
          }
        }
      },

      // 获取图片url
      //getImgUrl(img) {
        //return require("./assets/img/" + img);
      //},

      // 选中全部
      selectAll() {
        this.checked = this.exportConfig.tableList.map(ele => ele.id);
      }
    },
    beforeMount() {
      this.init();
    },
    mounted() {

    }
  };

</script>

<style scoped>
  .rz-radio-inp {
    width: 65px;
    color: #fff;
  }

  .rz-export {
    margin-bottom: 40px;
  }

  .rz-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(26, 26, 26, 1);
    line-height: 32px;
  }

  .rz-radio-group {
    margin-left: 40px;
  }

  .rz-radio-group>>>.el-radio__input.is-checked+.el-radio__label {
    color: #fff !important;
  }

</style>

2.在需要导出的Vue文件中，引用export.vue组件，(其中tableList中需要导出的内容，自己定义)

 <CommonExportNew :exportConfig="exportConfig" />


import CommonExportNew from "@/components/Common/export.vue";



 components: {
    CommonExportNew,

   }，

data(){
exportConfig = {
    tableList: [
      {
        id: 1,
        itemName: "委托单状态", // 复选框文本
        entrustStatusName: "委托单状态", // 键对应列表该列的 prop, 值为该列的表头(复选框文本)
      },
      {
        id: 2,
        itemName: "委托单位名称", // 复选框文本
        memberCompanyName: "委托单位名称", // 键对应列表该列的 prop, 值为该列的表头(复选框文本)
      },
      {
        id: 3,
        itemName: "委托人姓名",
        principalName: "委托人姓名",
      },
      {
        id: 4,
        itemName: "委托人手机",
        principalPhone: "委托人手机",
      },
      {
        id: 5,
        itemName: "样品名称",
        sampleName: "样品名称",
      },
      
    ],
    map: [], // 必填且无需数据, 用于接收导出接口所需参数
    fileType: "", // 必填且无需数据, 用于接收导出接口所需参数
  };

}
    
 

3.在utils中新建一个tools.ts文件，

//获取当前时间并格式化
export function getNowDate() {
  const date = new Date();
  let month: string | number = date.getMonth() + 1;
  let strDate: string | number = date.getDate();
  let hours: string | number = date.getHours();
  let minutes: string | number = date.getMinutes();
  if (month <= 9) {
    month = "0" + month;
  }
  if (strDate <= 9) {
    strDate = "0" + strDate;
  }
  if (hours <= 9) {
    hours = "0" + hours;
  }
  if (minutes <= 9) {
    minutes = "0" + minutes;
  }
  return (
    date.getFullYear() +
    "-" +
    month +
    "-" +
    strDate + ' ' + hours + ':' + minutes
  );
}


// 下载导出内容
export function downloadFile(data, config = {}) {
  const aLink = document.createElement("a");
  let blob = new Blob([data], {
    type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })
  aLink.href = URL.createObjectURL(blob);
  aLink.download = (config as any).name;
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}

4.需要导出的文件中使用  （其中，exportEntrustExcel为导出的接口，  ）

import { getNowDate } from "@/utils/tools";
import { clearObj, createExportConfig, downloadFile } from "@/utils/tools";



  subExportConfirm() {
    let data = this.getExportParams((this.exportEjectConfig as any).type);
    console.log(data, "data");

    if (
      (this as any).tableData.total > 3000 &&
      (this.exportEject as any).type == 1
    ) {
      this.$message.warning("数据量太大，请根据条件筛选后进行导出！");
      return false;
    }
    let fn = exportEntrustExcel;
    let fileName = getNowDate();
    fn(data).then((res) => {
      console.log(res.status, "99999");

      if (res.status == 200) {
        this.$message.success("导出成功");
        downloadFile(res.data, {
          name: fileName + "台账管理.xls",
        });
      } else {
        this.$message.error("导出失败");
      }
    });


private getExportParams(type) {
    return {
      ...this.tableParams,
      map: this.exportConfig.map,
      fileType: this.exportConfig.fileType,
      page: type == 2 ? (this as any).tableData.page : "",
      pageSize: type == 2 ? (this as any).tableData.pageSize : "",
    };
  }