下載之后的excel.jpeg
點(diǎn)擊進(jìn)去的顯示.jpeg
使用的是組件js-export-excel启妹，是一個(gè)純 js 導(dǎo)出 excel的方式
第一步：在使用的項(xiàng)目中安裝該組件
npm install js-export-excel
yarn add js-export-excel
第二步：在需要使用的地方引入該組件
import ExportJsonExcel from 'js-export-excel';
第三步：使用
<template>
<div>
<el-button type="primary" @click="download">
Export to Excel
</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"/>
<el-table-column prop="class" label="班級(jí)"/>
<el-table-column prop="achievement" label="成績(jī)"/>
</el-table>
</div>
</template>
<script>
import ExportJsonExcel from 'js-export-excel';
export default {
data() {
return {
tableData: [{
name: '陳卓',
class: '一年級(jí)',
achievement: '98'
},{
name: '張珂',
class: '一年級(jí)',
achievement: '89'
},{
name: '劉欣欣',
class: '一年級(jí)',
achievement: '88'
}]
};
},
methods: {
download () {
let tableExcel = [];
this.tableData.map(item => {
tableExcel.push({
'姓名': item.name,
'班級(jí)': item.class,
'成績(jī)': item.achievement
})
})
this.exportToExcel(tableExcel);
console.log(tableExcel)
},
exportToExcel (tableExcel) {
let option = {};
option.fileName = "學(xué)生成績(jī)單";
option.datas = [
{
sheetData: tableExcel,
sheetName: "一年級(jí)學(xué)生成績(jī)單",
sheetFilter: [
'姓名',
'班級(jí)',
'成績(jī)'
],
sheetHeader: [
'姓名',
'班級(jí)',
'成績(jī)'
]
}
];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
}
}
};
</script>
解釋說(shuō)明：
fileName：excel對(duì)應(yīng)的名字
sheetName：進(jìn)入excel中左下標(biāo)的名字
