首先你要安裝 兩個東西
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')
}