add:upload excel
This commit is contained in:
parent
f0afbf7ea5
commit
ffec6b6df7
5 changed files with 111 additions and 1 deletions
|
@ -33,6 +33,7 @@
|
|||
- 401, 404 error page
|
||||
- Error log
|
||||
- Exporting to Excel
|
||||
- Upload Excel
|
||||
- Table example
|
||||
- Interactive table example
|
||||
- Drag & drop table example
|
||||
|
|
|
@ -63,6 +63,7 @@
|
|||
- 401,404错误页面
|
||||
- 错误日志
|
||||
- 导出excel
|
||||
- 前端可视化excel
|
||||
- table example
|
||||
- 动态table example
|
||||
- 拖拽table example
|
||||
|
|
78
src/components/UploadExcel/index.vue
Normal file
78
src/components/UploadExcel/index.vue
Normal file
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button :loading="loading" type="primary" @click="handleUpload">select excel file</el-button>
|
||||
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
excelData: {
|
||||
header: null,
|
||||
results: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateDate({ header, results }) {
|
||||
this.excelData.header = header
|
||||
this.excelData.results = results
|
||||
this.loading = false
|
||||
this.$emit('on-selected-file', this.excelData)
|
||||
},
|
||||
handleUpload() {
|
||||
document.getElementById('excel-upload-input').click()
|
||||
},
|
||||
handkeFileChange(e) {
|
||||
this.loading = true
|
||||
const files = e.target.files
|
||||
const itemFile = files[0] // only use files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const data = e.target.result
|
||||
const fixedData = this.fixdata(data)
|
||||
const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
|
||||
const firstSheetName = workbook.SheetNames[0]
|
||||
const worksheet = workbook.Sheets[firstSheetName]
|
||||
const header = this.get_header_row(worksheet)
|
||||
const results = XLSX.utils.sheet_to_json(worksheet)
|
||||
this.generateDate({ header, results })
|
||||
}
|
||||
reader.readAsArrayBuffer(itemFile)
|
||||
},
|
||||
fixdata(data) {
|
||||
let o = ''
|
||||
let l = 0
|
||||
const w = 10240
|
||||
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
|
||||
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
|
||||
return o
|
||||
},
|
||||
get_header_row(sheet) {
|
||||
const headers = []
|
||||
const range = XLSX.utils.decode_range(sheet['!ref'])
|
||||
let C
|
||||
const R = range.s.r /* start in the first row */
|
||||
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
|
||||
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
|
||||
var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
|
||||
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
|
||||
headers.push(hdr)
|
||||
}
|
||||
return headers
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#excel-upload-input{
|
||||
display: none;
|
||||
z-index: -9999;
|
||||
}
|
||||
</style>
|
|
@ -150,7 +150,8 @@ export const asyncRouterMap = [
|
|||
icon: 'EXCEL',
|
||||
children: [
|
||||
{ path: 'download', component: _import('excel/index'), name: '导出excel' },
|
||||
{ path: 'download2', component: _import('excel/selectExcel'), name: '导出已选择项' }
|
||||
{ path: 'download2', component: _import('excel/selectExcel'), name: '导出已选择项' },
|
||||
{ path: 'upload', component: _import('excel/uploadExcel'), name: 'upload excel' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
29
src/views/excel/uploadExcel.vue
Normal file
29
src/views/excel/uploadExcel.vue
Normal file
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<upload-excel @on-selected-file='selected'></upload-excel>
|
||||
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
|
||||
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadExcel from 'components/UploadExcel/index.vue'
|
||||
|
||||
export default {
|
||||
components: { uploadExcel },
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableHeader: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selected(data) {
|
||||
this.tableData = data.results
|
||||
this.tableHeader = data.header
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in a new issue