之前有说过表格导出到Excel,今天来说一下怎么样导入Excel表格
一般来说这种功能都是封装成组件来使用的,我们来看看如何封装
在component中创建一个.vue文件,然后复制其他大佬的代码,做一个搬运工,具体代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
| <template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <button style="margin-left:16px;" type="primary" @click="handleUpload">上传文件</button> </div> </template>
<script> import XLSX from 'xlsx'
export default { props: { beforeUpload: Function, onSuccess: Function }, data() { return { loading: false, excelData: { header: null, results: null } } }, methods: { generateData({ header, results }) { this.excelData.header = header this.excelData.results = results this.onSuccess && this.onSuccess(this.excelData) }, handleUpload() { this.$refs['excel-upload-input'].click() }, handleClick(e) { const files = e.target.files const rawFile = files[0] if (!rawFile) return this.upload(rawFile) }, upload(rawFile) { this.$refs['excel-upload-input'].value = null
if (!this.beforeUpload) { this.readerData(rawFile) return } const before = this.beforeUpload(rawFile) if (before) { this.readerData(rawFile) } }, readerData(rawFile) { this.loading = true return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = e => { const data = e.target.result const workbook = XLSX.read(data, { type: 'array' }) const firstSheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[firstSheetName] const header = this.getHeaderRow(worksheet) const results = XLSX.utils.sheet_to_json(worksheet) this.generateData({ header, results }) this.loading = false resolve() } reader.readAsArrayBuffer(rawFile) }) }, getHeaderRow(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 */ const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */ let hdr = 'UNKNOWN ' + C // <-- replace with your desired default if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) headers.push(hdr) } return headers }, isExcel(file) { return /\.(xlsx|xls|csv)$/.test(file.name) } } } </script>
<style scoped> .excel-upload-input{ display: none; z-index: -9999; } .drop{ border: 2px dashed #bbb; width: 600px; height: 160px; line-height: 160px; margin: 0 auto; font-size: 24px; border-radius: 5px; text-align: center; color: #bbb; position: relative; } </style>
|
记得要安装一下 xlsx
然后就可以使用了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <template> <div> <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" /> </div> </template>
<script> import UploadExcelComponent from '@/components/excel.vue'
export default { name: 'UploadExcel', components: { UploadExcelComponent }, data() { return { tableData: [], tableHeader: [] } }, methods: { beforeUpload(file) { const isLt1M = file.size / 1024 / 1024 < 1
if (isLt1M) { return true }
this.$message({ message: 'Please do not upload files larger than 1m in size.', type: 'warning' }) return false }, handleSuccess({ results, header }) { console.log(results) console.log(header) } } } </script>
|
使用也很简单,handleSuccess函数中,results就是我们需要的数据了
好了,导入Excel就差不多了