1.安装依赖
npm install --save xlsx file-saver
2.在相应的组件中使用
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
</script>
3.添加导出按钮,写导出方法
其中用到两个el-table,是因为:第一个表格是页面上的表格数据,第二个是要导出的表格数据(因为页面上的数据进行了分页,导出的数据是接口返回的所有的数据,因此再写一个专门用来导出的表格数据)
<template>
<el-form-item>
<el-button type="success" v-auth="['patrolMoreRecord:export']" icon="el-icon-upload2" @click="exportExcel">导出</el-button>
</el-form-item>
<el-table
:data="list"
border
style="width:100%"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(210,210,210,0.8)">
<el-table-column prop="routeName" label="姓名"></el-table-column>
<el-table-column prop="unitName" label="性别"></el-table-column>
<el-table-column prop="taskEndTime" label="年龄"></el-table-column>
</el-table>
<el-table
id='out_table'
:data="exportList"
style="display:none"
>
<el-table-column prop="routeName" label="姓名"></el-table-column>
<el-table-column prop="unitName" label="性别"></el-table-column>
<el-table-column prop="taskEndTime" label="年龄"></el-table-column>
</el-table>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
data() {
return {
loading:true,
list: [],
exportList:[],
queryInfo: {
// 查询参数
obj:{
startDate:'',
endDate:'',
unitName:'',
unitId: '',
status: ''
},
// 当前的页数
pageCurrent: 1,
// 当前每页显示多少条数据
pageSize: 10
},
}
},
methods: {
// 导出数据
exportExcel(){
var vm = this
this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
vm.queryInfo.pageSize = 10000000
vm.$api.PatrolRecord(vm.queryInfo,function (data) {
vm.exportList = data.list
});
setTimeout(()=>{
vm.exportData()
},500)
}).catch(() => {});
},
exportData(){
var vm=this
var xlsxParam = { raw: true }
var wb = XLSX.utils.table_to_book(document.querySelector("#out_table"),xlsxParam);
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
'数据导出' + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
}
}
</script>