vue实现excel上传并显示数据

2026/9/12 5:13:29 拓冰建站浏览量
在vue中实现excel上传并显示数据
效果如下：
vue--excel上传
具体代码如下：
<template><div class="app-container"><inputref="excel-upload-input"class="excel-upload-input"style="width: 300px;margin-left: 10px"type="file"accept=".xlsx, .xls"@change="handleClick"/><div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">批量导入：拖拽excel文件或者<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">浏览</el-button></div><el-table :data="excelData.results" border highlight-current-row style="width: 100%;margin-top:20px;"><el-table-column v-for="item of excelData.header" :key="item" :prop="item" :label="item"/></el-table></div>
</template><script>
import XLSX from 'xlsx'
export default {name: 'UploadExcel',data() {return {loading: false,excelData: {header: null,results: null}}},methods: {handleUpload() {this.$refs['excel-upload-input'].click()},handleClick(e) {const files = e.target.filesconst file = files[0]const before = this.beforeUpload(file)if (before) {this.upload(file)}},// 上传文件的条件验证beforeUpload(file) {if (!file) {return false}const isLt1M = file.size / 1024 / 1024 < 1if (isLt1M) {return true}this.$message({message: '请上传1M以内的文件',type: 'warning'})return false},// excel文件数据获取upload(file) {this.$refs['excel-upload-input'].value = nullreturn new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = e => {const data = e.target.resultconst workbook = XLSX.read(data, { type: 'array' })// 获取第一个sheet页名字const firstSheetName = workbook.SheetNames[0]// 获取指定名字的sheet页内容const worksheet = workbook.Sheets[firstSheetName]// 获取标头const header = this.getHeaderRow(worksheet)// 获取除标头外的数据const results = XLSX.utils.sheet_to_json(worksheet)// 标头和数据处理this.generateData({ header, results })resolve()}reader.readAsArrayBuffer(file)})},// 获取标头getHeaderRow(sheet) {const headers = []const range = XLSX.utils.decode_range(sheet['!ref'])let Cconst 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 defaultif (cell && cell.t) hdr = XLSX.utils.format_cell(cell)headers.push(hdr)}return headers},handleDrop(e) {e.stopPropagation()e.preventDefault()if (this.loading) returnconst files = e.dataTransfer.filesif (files.length !== 1) {this.$message.error('仅支持上传一个文件!')return}const rawFile = files[0] // only use files[0]if (!this.isExcel(rawFile)) {this.$message.error('仅支持上传.xlsx, .xls, .csv格式的文件')return false}this.upload(rawFile)e.stopPropagation()e.preventDefault()},handleDragover(e) {e.stopPropagation()e.preventDefault()e.dataTransfer.dropEffect = 'copy'},// 标头和数据处理（可以在此方法中调用后端接口保存数据）generateData({ header, results }) {this.excelData.header = headerthis.excelData.results = results}}
}
</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>
建站实战干货

vue实现excel上传并显示数据
