iview+vue实现导入EXCEL预览功能 iview+vue实现导入EXCEL预览功能

本文实例为大家分享了iview+vue实现导入EXCEL预览的具体代码，供大家参考，具体内容如下
Xboot中，前端实现导入EXCEL预览功能
HTML部分

上传Excel文件当前选择文件：{{ uploadfile.name }}导入前请下载查看导入模版数据文件查看所需字段及说明，确保数据格式正确，不得修改列英文名称确认导入0">{{ importTableData.length }} 条数据

需要引入
1、安装插件

npm i xlsx

2、引入

import XLSX from "xlsx";

data中定义

importFile: importEquipment,//接口accessToken: {},uploadfile: {name: ''},importColumns: [],importTableData: [],

js代码

//导入数据beforeUploadImport(file) {this.uploadfile = fileconst fileExt = file.name.split('.').pop().toLocaleLowerCase()if (fileExt == 'xlsx' || fileExt == 'xls') {this.readFile(file)this.file = file} else {this.$Notice.warning({title: '文件类型错误',desc:'所选文件‘ ' +file.name +' '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'})}return false},// 读取文件readFile(file) {this.reading = trueconst reader = new FileReader()reader.readAsArrayBuffer(file)reader.onerror = (e) => {this.reading = falsethis.$Message.error('文件读取出错')}reader.onload = (e) => {console.log(e.target.result)const data = https://www.it610.com/article/e.target.resultconst { header, results } = excel.read(data,'array')const tableTitle = header.map((item) => {return { title: item, key: item, minWidth: 130, align: 'center' }})this.importTableData = https://www.it610.com/article/resultsthis.importColumns = tableTitlethis.reading = falsethis.$Message.success('读取数据成功')}},uploadSucess(response) {if (response.code == 200) {this.$Message.success('导入成功')this.importModalVisible = falsethis.clearImportData()this.getDataList()} else {this.$Message.error(response.message)}this.uploadfile = {}},clearImportData() {this.importTableData = https://www.it610.com/article/[]this.importColumns = []this.uploadfile = {}this.$refs.upload.clearFiles(); },

【iview+vue实现导入EXCEL预览功能】导入模板