diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js index 803eca25..377a946b 100644 --- a/src/vendor/Export2Excel.js +++ b/src/vendor/Export2Excel.js @@ -116,45 +116,43 @@ export function export_table_to_excel(id) { 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 */ - - var data = jsonData; - data.unshift(th); + data=[...data] + data.unshift(header); var ws_name = "SheetJS"; - var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); - /*设置worksheet每列的最大宽度*/ - const colWidth = data.map(row => row.map(val => { - /*先判断是否为null/undefined*/ - if (val == null) { - return {'wch': 10}; - } - /*再判断是否为中文*/ - else if (val.toString().charCodeAt(0) > 255) { - return {'wch': val.toString().length * 2}; - } else { - return {'wch': val.toString().length}; - } - })) - /*以第一行为初始值*/ - let result = colWidth[0]; - for (let i = 1; i < colWidth.length; i++) { - for (let j = 0; j < colWidth[i].length; j++) { - if (result[j]['wch'] < colWidth[i][j]['wch']) { - result[j]['wch'] = colWidth[i][j]['wch']; + if(autoWidth){ + /*设置worksheet每列的最大宽度*/ + const colWidth = data.map(row => row.map(val => { + /*先判断是否为null/undefined*/ + if (val == null) { + return {'wch': 10}; + } + /*再判断是否为中文*/ + else if (val.toString().charCodeAt(0) > 255) { + return {'wch': val.toString().length * 2}; + } else { + return {'wch': val.toString().length}; + } + })) + /*以第一行为初始值*/ + let result = colWidth[0]; + for (let i = 1; i < colWidth.length; i++) { + for (let j = 0; j < colWidth[i].length; j++) { + 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 */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; 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"}), title + ".xlsx") + saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx"); } diff --git a/src/views/excel/exportExcel.vue b/src/views/excel/exportExcel.vue index be12ea4b..543ee2ee 100644 --- a/src/views/excel/exportExcel.vue +++ b/src/views/excel/exportExcel.vue @@ -1,8 +1,16 @@ <template> - <!-- $t is vue-i18n global function to translate lang --> + <!-- $t is vue-i18n global function to translate lang --> <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-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-column align="center" label='Id' width="95"> <template slot-scope="scope"> @@ -45,7 +53,8 @@ export default { list: null, listLoading: true, downloadLoading: false, - filename: '' + filename: '', + autoWidth: true } }, created() { @@ -66,7 +75,12 @@ export default { const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const list = this.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 }) }, @@ -82,3 +96,13 @@ export default { } } </script> + +<style> +.radio-label { + font-size: 14px; + color: #606266; + line-height: 40px; + padding: 0 12px 0 30px; +} +</style> + diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue index bd62ade7..4e74fa14 100644 --- a/src/views/excel/selectExcel.vue +++ b/src/views/excel/selectExcel.vue @@ -72,7 +72,11 @@ export default { const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const list = this.multipleSelection 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.downloadLoading = false })