vue腳手架中，導出excel表格

首先你要安裝 兩個東西
cnpm i file-saver xlsx -S;
然後引入一個js文件 Export2Excel.js 這個在之後我會給出

// 方法
click(){
	import('@/utils/Export2Excel').then(excel => {
		  const tHeader = ['name','age','sex']; // 表頭數據
		  const filterVal = ['name','age','sex'];
		  const list = this.data;
		  const data = this.formatJson(filterVal, list)
		  excel.export_json_to_excel({
			header: tHeader,
			data,
			filename: ‘我的excel’, // 自定義導出文件名字
			autoWidth: true,   //自動寬度
			bookType: 'xlsx'   // 文件類型 可以 txt的哦
		  })
		})
  },
  formatJson(filterVal, jsonData) {
	return jsonData.map(v => filterVal.map(j => {
		return v[j]
	}))
  }

好了 下來 我們那數據 測試下哈
頁面和測試代碼在下面

<template>
	<div id="app">
		<el-button type="primary" @click="click">導出excel</el-button>
	</div>
</template>
data(){
	 return {
		  data:[{name:'zhangsan',age:12,sex:'男'}]
	  }
  },

實際演示效果

https://github.com/zhaoyunchong/excelUtils // git 代碼地址

這裏有一個vue.ts版本的 感興趣的瞭解下哈 git中也有 ts的代碼

import { exportJson2Excel } from '@/utils/excel';
import { formatJson } from '@/utils';
private daochu(){
    const tHeader = ['id','name','age']
    const filterVal = ['id','name','age']
    const list = [{id:1,name:'3',age:12}];
    const data = formatJson(filterVal, list)
    console.log(data);
    exportJson2Excel(tHeader, data,'我的excel', undefined, undefined, true, 'xlsx')
  }