vue-批量导出

第一步：安装插件

npm -i xlsx

第二步：main.js 挂载插件

import xlsx from "xlsx"
Vue.prototype.xlsx = xlsx

第三步：编写导出组件，在使用xlsx，要使用this。

<template>
  <!-- 批量导出按钮 -->
  <div class="searchBox">
    <el-button type="success" @click="exportExcel">导出EXCEL</el-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
      //父组件选中的数据
      selectionData:{
          type:Array,
          default:null
      },
  },
  data() {
    //这里存放数据
    return {
      loading: false, //表格加载动画是否开启
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 批量导出EXCEL
    exportExcel() {
      let selectionData = this.selectionData;
      if (selectionData.length === 0) {
        this.$message({
          message: "请选择你要导出的客户数据",
          type: "warning",
        });
        return;
      }
      // 加上一个loading   正在处理中....
      let loading = this.$loading({
        text: "正在处理中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 把选中的数据导出成一个excel
      // formatJSONWeet(selectionData) 数据转换 name -> 姓名
      console.log("前",selectionData);
      selectionData = this.formatJSONWeet(selectionData);
      console.log("后",selectionData);
      let sheet = this.xlsx.utils.json_to_sheet(selectionData);

      // https://www.jianshu.com/p/ea115a8e9107
      var book = this.xlsx.utils.book_new(); // 创建一个excel
      this.xlsx.utils.book_append_sheet(book, sheet, "客户列表"); // 指定表名
      this.xlsx.writeFile(book, `customlist${new Date().getTime()}.xlsx`); // 指定excel文件名

      loading.close();
      this.$emit('clearSelectionData',this.selectionData); //向父组件传递方法，关闭选择的选项
    },
    formatJSONWeet(result) {
    //根据自己的需要导出自己对应的字段
      let propertyMap = {
        编号: {
          key: "userId",
          type: "number",
        },
        姓名: {
          key: "username",
          type: "string",
        },
        状态: {
          key: "status",
          type: "string",
          rule: (val) => {
            return val == 0 ? "禁用" : "启用";
          },
        },
        邮箱: {
          key: "email",
          type: "string",
        },
        电话: {
          key: "mobile",
          type: "string",
        }, 
      };
      return result.map(item => {
		let obj = {};
		Object.keys(propertyMap).forEach(key => {
			let {
				type,
				key: keyMap,
				rule
			} = propertyMap[key];
			let value = item[keyMap];
			typeof rule === "function" ? value = rule(value) : null;
			switch (type) {
				case 'string':
					value = String(value);
					break;
				case 'number':
					value = Number(value);
					break;
			}
			obj[key] = value;
		});
		return obj;
	});
     
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>

在页面中使用

<template>
	<!-- 导出组件 -->
	<exportComponents :selectionData="dataListSelections" @clearSelectionData="clearDataList"></exportComponents>
</template>
<script>
	import exportComponents from "@/components/export/export";
	export default {
		 components: {
			    exportComponents
  			},
  			methods: {
			    //清空选项数据
			    clearDataList(){
			        this.$refs.multipleTable.clearSelection();
    			},
    	   }
	}
</script>