antd vue 表格数据导出成Excel

最近在用antd vue框架写项目，记录一些常用的功能
先写一个表格数据导出成Excel，我也是借鉴网上的一些文章
1.先下载第三方依赖包，需要安装三个依赖

npm install -S file-saver xlsx
npm install -D script-loader

2.在项目中新建文件夹，里面放置两个文件Blob.js和 Export2Excel.js

文件下载地址：https://pan.baidu.com/s/1U10J6RvBdH8uRajE4gzPdw
提取码：i59o

3.我这里是好多处用到了导出，所以自己封装了一下
新建一个js文件

exportExcel.js内容

export function export2Excel(columns,list){
    require.ensure([], () => {
        const { export_json_to_excel } = require('./excel/Export2Excel');
        let tHeader = []
        let filterVal = []
        columns.forEach(item =>{
        	// 这里是定义Excel表格里面的表头和内容
            tHeader.push(item.title)
            // dataIndex是表格中的columns数据在list中对应的 key
            filterVal.push(item.dataIndex)
        })
        const data = list.map(v => filterVal.map(j => v[j]))
        // 三个参数，第一个是表头，第二个是单元格内容，第三个是Excel文件名称
        export_json_to_excel(tHeader, data, '数据列表');
    })
}

4.在页面中引入export2Excel.js

<template>
	<div>
		<div style="width: 1200px; margin: 0 auto">
	      <a-table
	        :row-selection="rowSelection"
	        :columns="columns"
	        :data-source="data"
	      />
	    </div>
	    <a-button @click="exportData">导出</a-button>
	</div>
</template>
<script>
	import { export2Excel } from "@/utils/exportExcel.js";
	const columns = [
	  {
	    title: "Name",
	    dataIndex: "name",
	  },
	  {
	    title: "Age",
	    dataIndex: "age",
	  },
	  {
	    title: "Address",
	    dataIndex: "address",
	  },
	];
	
	const data = [];
	for (let i = 0; i < 46; i++) {
	  data.push({
	    key: i,
	    name: `Edward King ${i}`,
	    age: 32,
	    address: `London, Park Lane no. ${i}`,
	  });
	}
	export default {
		data() {
			data,
		    columns,
		    selectedRowKeys: [],
		},
		computed: {
	    rowSelection() {
	      const { selectedRowKeys } = this;
	      return {
	        selectedRowKeys,
	        onChange: this.onSelectChange,
	        selections: true,
	        onSelection: this.onSelection,
	      };
	    },
	  },
	  methods: {
		exportData () {
	      var list = []
	      this.selectedRowKeys.map(v => {
	        list.push(this.data[v])
	      })
	      console.log(list);
	      export2Excel(this.columns,list)
	    },
	    onSelectChange(selectedRowKeys) {
	      console.log("selectedRowKeys changed: ", selectedRowKeys);
	      this.selectedRowKeys = selectedRowKeys;
	    },
	  }
	}
</script>

这样就搞定了，如果此篇文章对你有用的话麻烦给个三连，谢谢啦！