Skip to content

Commit

Permalink
feature[Excel]: support bookType option (PanJiaChen#1144)
Browse files Browse the repository at this point in the history
  • Loading branch information
PanJiaChen authored Sep 29, 2018
1 parent dc84e7b commit ff13ee1
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 190 deletions.
176 changes: 0 additions & 176 deletions src/vendor/Blob.js

This file was deleted.

8 changes: 4 additions & 4 deletions src/vendor/Export2Excel.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable */
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');
import XLSX from 'xlsx'

function generateArray(table) {
Expand Down Expand Up @@ -149,7 +148,8 @@ export function export_json_to_excel({
header,
data,
filename,
autoWidth = true
autoWidth = true,
bookType= 'xlsx'
} = {}) {
/* original data */
filename = filename || 'excel-list'
Expand Down Expand Up @@ -196,11 +196,11 @@ export function export_json_to_excel({
wb.Sheets[ws_name] = ws;

var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookType: bookType,
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), filename + ".xlsx");
}), `${filename}.${bookType}`);
}
30 changes: 30 additions & 0 deletions src/views/excel/components/AutoWidthOption.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<div style="display:inline-block;">
<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>
</div>
</template>

<script>
export default {
props: {
value: {
type: Boolean,
default: true
}
},
computed: {
autoWidth: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
38 changes: 38 additions & 0 deletions src/views/excel/components/BookTypeOption.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div style="display:inline-block;">
<label class="radio-label">Book Type: </label>
<el-select v-model="bookType" style="width:120px;" >
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"/>
</el-select>
</div>
</template>

<script>
export default {
props: {
value: {
type: String,
default: 'xlsx'
}
},
data() {
return {
options: ['xlsx', 'csv', 'txt']
}
},
computed: {
bookType: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
28 changes: 28 additions & 0 deletions src/views/excel/components/FilenameOption.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<div style="display:inline-block;">
<!-- $t is vue-i18n global function to translate lang -->
<label class="radio-label" style="padding-left:0;">Filename: </label>
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
</div>
</template>

<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
computed: {
filename: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
29 changes: 19 additions & 10 deletions src/views/excel/exportExcel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<!-- $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 :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
<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 :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
<div>
<FilenameOption v-model="filename" />
<AutoWidthOption v-model="autoWidth" />
<BookTypeOption v-model="bookType" />
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">{{ $t('excel.export') }} Excel</el-button>
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
<el-tag type="info">Documentation</el-tag>
</a>
</div>

<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label="Id" width="95">
Expand Down Expand Up @@ -46,15 +47,22 @@
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'
// options components
import FilenameOption from './components/FilenameOption'
import AutoWidthOption from './components/AutoWidthOption'
import BookTypeOption from './components/BookTypeOption'
export default {
name: 'ExportExcel',
components: { FilenameOption, AutoWidthOption, BookTypeOption },
data() {
return {
list: null,
listLoading: true,
downloadLoading: false,
filename: '',
autoWidth: true
autoWidth: true,
bookType: 'xlsx'
}
},
created() {
Expand All @@ -79,7 +87,8 @@ export default {
header: tHeader,
data,
filename: this.filename,
autoWidth: this.autoWidth
autoWidth: this.autoWidth,
bookType: this.bookType
})
this.downloadLoading = false
})
Expand Down
3 changes: 3 additions & 0 deletions src/views/excel/selectExcel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
<!-- $t is vue-i18n global function to translate lang -->
<el-input :placeholder="$t('excel.placeholder')" v-model="filename" style="width:340px;" prefix-icon="el-icon-document"/>
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">{{ $t('excel.selectedExport') }}</el-button>
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
<el-tag type="info">Documentation</el-tag>
</a>
<el-table
v-loading="listLoading"
ref="multipleTable"
Expand Down

0 comments on commit ff13ee1

Please sign in to comment.