|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <nav-bar/> |
| 4 | + <el-upload |
| 5 | + ref="upload" |
| 6 | + :on-preview="handlePreview" |
| 7 | + :on-remove="handleRemove" |
| 8 | + :before-upload="beforeUpload" |
| 9 | + :file-list="fileList" |
| 10 | + class="upload-demo" |
| 11 | + action=""> |
| 12 | + <el-button slot="trigger" size="small" type="primary">选取文件</el-button> |
| 13 | + <div slot="tip" class="el-upload__tip">只能上传 Excel 文件，且不超过 500kb</div> |
| 14 | + </el-upload> |
| 15 | + |
| 16 | + <el-card class="box-card"> |
| 17 | + <div slot="header" class="clearfix"> |
| 18 | + <span>数据预览</span> |
| 19 | + </div> |
| 20 | + <div class="text item"> |
| 21 | + <el-table :data="tableData" border highlight-current-row style="width: 100%;"> |
| 22 | + <el-table-column :label="tableTitle" > |
| 23 | + <el-table-column v-for="item in tableHeader" :prop="item" :label="item" :key="item" min-width="150" /> |
| 24 | + </el-table-column> |
| 25 | + </el-table> |
| 26 | + </div> |
| 27 | + </el-card> |
| 28 | + </div> |
| 29 | +</template> |
| 30 | + |
| 31 | +<script> |
| 32 | +import XLSX from 'xlsx' |
| 33 | +export default { |
| 34 | + data() { |
| 35 | + return { |
| 36 | + fileList: [], |
| 37 | + upLoadNumber: 100000, |
| 38 | + tableTitle: '', |
| 39 | + tableData: [], |
| 40 | + tableHeader: '' |
| 41 | + } |
| 42 | + }, |
| 43 | + methods: { |
| 44 | + submitUpload() { |
| 45 | + this.$refs.upload.submit() |
| 46 | + }, |
| 47 | + handleRemove(file, fileList) { |
| 48 | + console.log(file, fileList) |
| 49 | + }, |
| 50 | + handlePreview(file) { |
| 51 | + console.log(file) |
| 52 | + }, |
| 53 | + beforeUpload(file) { |
| 54 | + const _this = this |
| 55 | + // 使返回的值变成Promise对象，如果校验不通过，则reject，校验通过，则resolve |
| 56 | + return new Promise(function(resolve, reject) { |
| 57 | + // readExcel方法也使用了Promise异步转同步，此处使用then对返回值进行处理 |
| 58 | + _this.readExcel(file).then(result => { // 此时标识校验成功，为resolve返回 |
| 59 | + if (result) resolve(result) |
| 60 | + }) |
| 61 | + }) |
| 62 | + }, |
| 63 | + readExcel(file) { // 解析Excel |
| 64 | + console.log(file) |
| 65 | + const _this = this |
| 66 | + return new Promise(function(resolve, reject) { // 返回Promise对象 |
| 67 | + const reader = new FileReader() |
| 68 | + reader.onload = (e) => { // 异步执行 |
| 69 | + try { |
| 70 | + // 以二进制流方式读取得到整份excel表格对象 |
| 71 | + const data = e.target.result |
| 72 | + const workbook = XLSX.read(data, { type: 'binary' }) |
| 73 | + const batteryArr = [] |
| 74 | + console.log(workbook.SheetNames) |
| 75 | + for (const item in workbook.SheetNames) { |
| 76 | + console.log(item) |
| 77 | + const SheetName = workbook.SheetNames[item] |
| 78 | + const sheetInfos = workbook.Sheets[SheetName] |
| 79 | + for (const battery in sheetInfos) { |
| 80 | + if (battery !== '!ref') { |
| 81 | + batteryArr.push(sheetInfos[battery]) |
| 82 | + } |
| 83 | + } |
| 84 | + } |
| 85 | + const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]) |
| 86 | + console.log(outdata) |
| 87 | + const tableTitle = workbook.SheetNames[0] |
| 88 | + console.log(tableTitle) |
| 89 | + const worksheet = workbook.Sheets[workbook.SheetNames[0]] |
| 90 | + const header = _this.get_header_row(worksheet) |
| 91 | + console.log(header) |
| 92 | + const results = XLSX.utils.sheet_to_json(worksheet) |
| 93 | + console.log(results) |
| 94 | + _this.generateDate({ tableTitle, header, results }) |
| 95 | + // console.log(batteryArr) |
| 96 | + if (batteryArr.length > _this.upLoadNumber) { |
| 97 | + console.log('不能超过') |
| 98 | + resolve(false) |
| 99 | + } else { |
| 100 | + resolve(true) |
| 101 | + } |
| 102 | + } catch (e) { |
| 103 | + reject(e.message) |
| 104 | + } |
| 105 | + } |
| 106 | + reader.readAsBinaryString(file) |
| 107 | + }) |
| 108 | + }, |
| 109 | + generateDate({ tableTitle, header, results }) { |
| 110 | + console.log(tableTitle) |
| 111 | + console.log(header) |
| 112 | + console.log(results) |
| 113 | + this.tableTitle = tableTitle |
| 114 | + this.tableData = results |
| 115 | + this.tableHeader = header |
| 116 | + }, |
| 117 | + handleDrop(e) { |
| 118 | + e.stopPropagation() |
| 119 | + e.preventDefault() |
| 120 | + const files = e.dataTransfer.files |
| 121 | + if (files.length !== 1) { |
| 122 | + this.$message.error('Only support uploading one file!') |
| 123 | + return |
| 124 | + } |
| 125 | + const itemFile = files[0] // only use files[0] |
| 126 | + this.readerData(itemFile) |
| 127 | + e.stopPropagation() |
| 128 | + e.preventDefault() |
| 129 | + }, |
| 130 | + handleDragover(e) { |
| 131 | + e.stopPropagation() |
| 132 | + e.preventDefault() |
| 133 | + e.dataTransfer.dropEffect = 'copy' |
| 134 | + }, |
| 135 | + readerData(itemFile) { |
| 136 | + if (itemFile.name.split('.')[1] !== 'xls' && itemFile.name.split('.')[1] !== 'xlsx') { |
| 137 | + this.$message({ message: '上传文件格式错误，请上传xls、xlsx文件！', type: 'warning' }) |
| 138 | + } else { |
| 139 | + const reader = new FileReader() |
| 140 | + reader.onload = e => { |
| 141 | + const data = e.target.result |
| 142 | + const fixedData = this.fixdata(data) |
| 143 | + // const fixedData = data |
| 144 | + const workbook = XLSX.read(btoa(fixedData), { type: 'base64' }) |
| 145 | + const firstSheetName = workbook.SheetNames[0] // 第一张表 sheet1 |
| 146 | + console.log(firstSheetName) |
| 147 | + const worksheet = workbook.Sheets[firstSheetName] // 读取sheet1表中的数据 delete worksheet['!merges'] |
| 148 | + const A_l = worksheet['!ref'].split(':')[1] // 当excel存在标题行时 |
| 149 | + worksheet['!ref'] = `A2:${A_l}` |
| 150 | + const tableTitle = firstSheetName |
| 151 | + const header = this.get_header_row(worksheet) |
| 152 | + console.log(header) |
| 153 | + const results = XLSX.utils.sheet_to_json(worksheet) |
| 154 | + console.log(results) |
| 155 | + this.generateDate({ tableTitle, header, results }) |
| 156 | + } |
| 157 | + reader.readAsArrayBuffer(itemFile) |
| 158 | + } |
| 159 | + }, |
| 160 | + fixdata(data) { |
| 161 | + let o = '' |
| 162 | + let l = 0 |
| 163 | + const w = 10240 |
| 164 | + for (l = 0; l < data.byteLength / w; ++l) { |
| 165 | + o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))) |
| 166 | + o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))) |
| 167 | + return o |
| 168 | + } |
| 169 | + }, |
| 170 | + get_header_row(sheet) { |
| 171 | + const headers = [] |
| 172 | + const range = XLSX.utils.decode_range(sheet['!ref']) |
| 173 | + let C |
| 174 | + const R = range.s.r /* start in the first row */ |
| 175 | + for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ |
| 176 | + var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */ |
| 177 | + var hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t) |
| 178 | + hdr = XLSX.utils.format_cell(cell) |
| 179 | + headers.push(hdr) |
| 180 | + } |
| 181 | + return headers |
| 182 | + } |
| 183 | + } |
| 184 | +} |
| 185 | +</script> |
| 186 | + |
| 187 | +<style scoped> |
| 188 | + .el-input { |
| 189 | + width: 97%; |
| 190 | + margin-bottom: 3% |
| 191 | + } |
| 192 | +
|
| 193 | + .input-with-select .el-input-group__prepend { |
| 194 | + background-color: #fff |
| 195 | + } |
| 196 | +</style> |
0 commit comments