简介
js导出excel，（数据不分页的情况下，即前端能拿到全部数据才能导出全部数据），原文链接https://blog.csdn.net/weixin_46705618/article/details/107377103
1.安装依赖包
1
2
3
| npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
|
2.把两个js文件放到项目里 Blob.js、Export2Excel.js
地址（私有库）：https://gitee.com/lishichang/common/tree/master/Export2Excel
3.main.js中引入
1
2
| import Blob from './Excel/Blob.js'
import Export2Excel from './Excel/Export2Excel.js'
|
4.vue组件（element-ui的按钮）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <template>
<!-- v-bind="excelData" // 父组件传给此组件的数据
excelData: {
title: "", // 标题
filterField: [], // 字段['name','age']
tHeader: [], // 表头['姓名','年龄']
list: [] // 数据[{name:'1',age:18},{name:'2',age:19}]
} -->
<el-button class="public-btn" @click="export2Excel">{{btnText}}</el-button>
</template>
<script type="text/javascript">
export default {
name: 'ExportExcel',
props:{
title:{
type:String,
default:'' // 文件名称
},
filterField:{
type:Array,
default:()=>[] // 字段 [name,age]
},
tHeader:{
type:Array,
default:()=>[] // 表格顶部名称 [名称,性别]
},
list:{
type:Array,
default:()=>[] // 数据 [{name:'张三',age:16}]
},
btnText:{
type:String,
default:'导出Excel' // 按钮名称 默认为导出excel
}
},
computed:{
listData(){
return (this.btnText).indexOf('导出')>-1?this.list:[];
}
},
methods: {
formatJson(filterField, jsonData) {
return jsonData.map(function(dataObj) {
return filterField.map(function(field) {
let fieldObj = dataObj[field];
if (!fieldObj) {
fieldObj = "-";
}
return fieldObj;
});
});
},
export2Excel() {
require.ensure([], () => {
let { export_json_to_excel } = require("@/Excel/Export2Excel");
let data = this.formatJson(this.filterField, this.listData);
let title = this.btnText=='导出excel'?this.title:this.title+'';
export_json_to_excel(this.tHeader, data, title);
});
}
}
};
</script>
|
5.使用组件
1
| <export-excel v-bind="excelData"></export-excel>
|
