需求
- 在页面表格前加导出按钮,导出当前页数据。
- 在多个页面使用,设计成组件。
package.json
"dependencies": {
"file-saver": "2.0.1",
"xlsx": "0.14.1"
},
module
<template>
<div>
<el-button type="text" @click="export" style="padding: 0px;font-weight: bold;">导出</el-button>
</div>
</template>
<script lang="js">
import * as XLSX from 'xlsx/xlsx.js';
import FileSaver from 'file-saver';
import dataFormatUtil from '@/api/dataFormatUtil';
export default {
props: {
tableId: {
type: String,
default() {
return "";
}
},
listData: {
type: Array,
default() {
return [];
}
},
excelTitle: {
type: String,
default() {
return "excel";
}
}
},
methods: {
exportTable(){
if(this.listData.length !== 0){
let now = new Date();
let timePart = dataFormatUtil.format(now, "yyyy-MM-dd");
let filename = this.excelTitle + "_" + timePart;
let content = XLSX.utils.table_to_book(document.getElementById(this.tableId), {raw: true});
let out = XLSX.write(content, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([out], {
type: "application/octet-stream",
}),
filename + ".xlsx"
);
} catch (e) {
console.log(e);
}
return out;
}else{
this.$message({
message: '请查询要导出的数据',
type: 'warning'
})
}
},
}
}
</script>
调用
<div class="tableTitle" style="display: flex">
<span style="flex: 1">数据列表</span>
<export-excel table-id="tableList" :list-data="list" excel-title="excel标题"></export-excel>
</div>
<el-table
:data="list"
id="tableList">
备注
- 数据列表span中的flex:1意味着将flex item的flex-grow,flex-shrink,和flex-basis三个属性设置为以下值:flex-grow: 1;flex-shrink: 1;flex-basis: 0%;
- flex 是弹性,display为flex属性的可以称为弹性容器,弹性容器中的子节点可以称为弹性项,感觉是为了适配不同屏幕设计出来的。
- 在本例中,由于导出按钮处未设置flex:1,所以数据列表中可以扩展到整行。
- 本例中table的id属性需要注意在不同的template中的唯一,如果一样会出问题。这个应该是常识,咱太小白了。