perf[excel]: refactor excel (#536)

This commit is contained in:
花裤衩 2018-03-26 13:54:19 +08:00 committed by GitHub
parent fc19121311
commit a55b149b27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 33 deletions

View file

@ -116,45 +116,43 @@ export function export_table_to_excel(id) {
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx") saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
} }
export function export_json_to_excel(th, jsonData, defaultTitle) { export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
/* original data */ /* original data */
data=[...data]
var data = jsonData; data.unshift(header);
data.unshift(th);
var ws_name = "SheetJS"; var ws_name = "SheetJS";
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
/*设置worksheet每列的最大宽度*/ if(autoWidth){
const colWidth = data.map(row => row.map(val => { /*设置worksheet每列的最大宽度*/
/*先判断是否为null/undefined*/ const colWidth = data.map(row => row.map(val => {
if (val == null) { /*先判断是否为null/undefined*/
return {'wch': 10}; if (val == null) {
} return {'wch': 10};
/*再判断是否为中文*/ }
else if (val.toString().charCodeAt(0) > 255) { /*再判断是否为中文*/
return {'wch': val.toString().length * 2}; else if (val.toString().charCodeAt(0) > 255) {
} else { return {'wch': val.toString().length * 2};
return {'wch': val.toString().length}; } else {
} return {'wch': val.toString().length};
})) }
/*以第一行为初始值*/ }))
let result = colWidth[0]; /*以第一行为初始值*/
for (let i = 1; i < colWidth.length; i++) { let result = colWidth[0];
for (let j = 0; j < colWidth[i].length; j++) { for (let i = 1; i < colWidth.length; i++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) { for (let j = 0; j < colWidth[i].length; j++) {
result[j]['wch'] = colWidth[i][j]['wch']; if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
} }
} }
ws['!cols'] = result;
} }
ws['!cols'] = result;
/* add worksheet to workbook */ /* add worksheet to workbook */
wb.SheetNames.push(ws_name); wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws; wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}); var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
var title = defaultTitle || 'excel-list' saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
} }

View file

@ -1,8 +1,16 @@
<template> <template>
<!-- $t is vue-i18n global function to translate lang --> <!-- $t is vue-i18n global function to translate lang -->
<div class="app-container"> <div class="app-container">
<label class="radio-label" style="padding-left:0;">Filename: </label>
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input> <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button> <label class="radio-label">Cell Auto Width: </label>
<el-radio-group v-model="autoWidth">
<el-radio :label="true" border>True</el-radio>
<el-radio :label="false" border>False</el-radio>
</el-radio-group>
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='Id' width="95"> <el-table-column align="center" label='Id' width="95">
<template slot-scope="scope"> <template slot-scope="scope">
@ -45,7 +53,8 @@ export default {
list: null, list: null,
listLoading: true, listLoading: true,
downloadLoading: false, downloadLoading: false,
filename: '' filename: '',
autoWidth: true
} }
}, },
created() { created() {
@ -66,7 +75,12 @@ export default {
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list const list = this.list
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, this.filename) excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename,
autoWidth: this.autoWidth
})
this.downloadLoading = false this.downloadLoading = false
}) })
}, },
@ -82,3 +96,13 @@ export default {
} }
} }
</script> </script>
<style>
.radio-label {
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 30px;
}
</style>

View file

@ -72,7 +72,11 @@ export default {
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection const list = this.multipleSelection
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, this.filename) excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename
})
this.$refs.multipleTable.clearSelection() this.$refs.multipleTable.clearSelection()
this.downloadLoading = false this.downloadLoading = false
}) })