commit
b88abd994a
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "vue-element-admin",
|
"name": "vue-element-admin",
|
||||||
"version": "3.6.3",
|
"version": "3.6.4",
|
||||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||||
"author": "Pan <panfree23@gmail.com>",
|
"author": "Pan <panfree23@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -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")
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -231,7 +231,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
@ -245,6 +245,8 @@
|
||||||
.filters {
|
.filters {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.filters li {
|
.filters li {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue