npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
1.downButton文件建index.vue
<template>
<a-button type="primary" class="select-top tempDown" :loading="downloadLoading" @click="clickDown">
表格下载
</a-button>
</template>
<script>
export default {
props: {
downData: {
type: Object,
default: () => { }
}
},
data() {
return {
downloadLoading: false,
}
},
methods: {
clickDown() {
this.downloadLoading = true
setTimeout(() => {
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel');
const tHeader = this.downData.tHeader;
const filterVal = this.downData.filterVal;
const list = this.downData.tableExportData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, this.downData.tableName);
})
this.downloadLoading = false
}, 1000)
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/common/css/common.less';
.select-top {
margin-right: @mrg;
}
.tempDown {
background-color: @TemplateDownload_btn;
border: @border;
/deep/a:hover {
color: #fafcfd;
}
/deep/a {
color: #eff3f7;
}
}
</style>
2.需要使用的页面引入组件
data里面定义:
import { columns } from “./columns”
import buttonDown from “@/components/DownButton”
export default {
name: “index”,
components: {
buttonDown
},
data() {
return {
columns,
downData: {
tHeader: [],
filterVal: [],
tableExportData: [],
tableName: ‘xxx表格名称’,
}
}
},
created() {
this.getDownData()
},
methods: {
getDownData() {
let tableQuery = {
Sorts: [‘creationTime desc’],
SortOrder: “desc”,
PageIndex: 1,
PageSize: 9999,
}
apiList(tableQuery).then(res => {
this.downData.tableExportData = res.data.rows
this.columns.map(v => {
this.downData.tHeader.push(v.title)
this.downData.filterVal.push(v.dataIndex)
})
})
},
}
Blob.js
/* Blob.js
* A Blob implementation.
* 2014-05-27
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr
* License: X11/MIT
* See LICENSE.md
*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*