vue项目导入 .xlsx 文件

直接上代码，简单示例：

        点击导入按钮，弹出导入弹窗；

template 部分的代码：

<div><el-buttonclass="filter-item"style="margin-left: 10px; margin-bottom: 20px; height: 30px"type="primary"@click="importFile()">导入调整下达表</el-button>
</div>
<el-dialog:title="title":visible.sync="dialogVisible"width="40%":before-close="importClose"
><div style="display: flex; align-items: center"><aherf="javaScript:;"style="font-weight: bold;color: #d89a54;margin-right: 10px;margin-bottom: 18px;font-size: 16px;"@click="downloadModel()">【模版下载】</a></div><div><el-form style="display: flex; align-items: center"><el-form-itemlabel="导入年份"label-width="88px"class="importYearSty"><el-date-pickerv-model="importYear"value-format="yyyy"clearabletype="year"/></el-form-item><el-form-item label="导入月份" label-width="88px"><el-selectv-model="importMonth"placeholder="请选择"style="width: 140px"clearable><el-option label="一月" value="一月"></el-option><el-option label="二月" value="二月"></el-option><el-option label="三月" value="三月"></el-option><el-option label="四月" value="四月"></el-option><el-option label="五月" value="五月"></el-option><el-option label="六月" value="六月"></el-option><el-option label="七月" value="七月"></el-option><el-option label="八月" value="八月"></el-option><el-option label="九月" value="九月"></el-option><el-option label="十月" value="十月"></el-option><el-option label="十一月" value="十一月"></el-option><el-option label="十二月" value="十二月"></el-option></el-select></el-form-item></el-form></div><br /><br /><div style="margin: 30px; padding-left: 100px; box-sizing: box-sizing"><el-uploadref="upload"action="#":limit="1"class="upload-demo"drag:on-change="handleChange":accept="accept":multiple="false":auto-upload="false"><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100M</div></el-upload></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="subMit">提交</el-button></span>
</el-dialog>

data 部分的代码：

data() {return {// 导入excel文件配置fileMIMEList: ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',''],// 可导入文件类型accept: '.xls,.xlsx',// 弹窗标题title: '导入文件',// 弹窗是否展示，默认不展示dialogVisible: false,file：null,// 导入数据的月份importMonth: '',// 导入年份，默认当前年份importYear: new Date().getFullYear().toString()}
}

引入的js:

import { getDiaLog } from '@/api/ims-demo/scProjInfo'; // 获取模板的方法
import axios from 'axios';
import { getCookieCode, getCookieToken } from '@/utils/auth'; // 获取token和code

methods 部分的代码：

// 点击导入按钮
importFile() {if (this.$refs.upload) {this.$refs.upload.uploadFiles = []}this.file = nullthis.dialogVisible = truethis.title = '上传文件'
},
// 弹窗关闭按钮
importClose() {this.dialogVisible = false
},
// 模板下载按钮
downloadModel() {let modelKey = 'xxhsjdzbhxmxdb'getDiaLog(modelKey).then((res) => {const downloadbtn = document.createElement('a')const url =process.env.VUE_APP_BASE_IMS_EXT +'f-center/hadoop/hdfs/download?path=' + resdownloadbtn.setAttribute('href', url)downloadbtn.style.display = 'none'document.body.appendChild(downloadbtn)downloadbtn.click()document.body.removeChild(downloadbtn)})
},
// 导入成功时执行
async handleChange(file) {if(!this.fileMIMEList.includes(file.raw.type)) {this.$message.error(`请上传 ${this.accept} 的文件！`)return false}const data = await this.readFile(file.raw)const workbook = XLSX.read(data, {type: 'binary',cellDates: true}) // 解析二进制格式数据const worksheet = workbook.Sheets[workbook.SheetNames[0]] // 获取第一个Sheetconst result = XLSX.utils.sheet_to_json(worksheet) // json数据格式this.file = result
},
readFile(file) {// 文件读取return new Promise((resolve) => {const reader = new FileReader()reader.readAsBinaryString(file) // 以二进制的方式读取reader.onload = (ev) => {resolve(ev.target.result)}})
},
// 提交按钮
subMit() {let month = 1switch (this.importMonth) {case '一月':month = 1breakcase '二月':month = 2breakcase '三月':month = 3breakcase '四月':month = 4breakcase '五月':month = 5breakcase '六月':month = 6breakcase '七月':month = 7breakcase '八月':month = 8breakcase '九月':month = 9breakcase '十月':month = 10breakcase '十一月':month = 11breakcase '十二月':month = 12break}const FormDatas = new FormData()FormDatas.append('excelData', JSON.stringify(this.file))FormDatas.append('timeScope', String(month))FormDatas.append('year', String(this.importYear))// importExcelData(this.file, this.activeTagName, new Date().getFullYear())// 根据自己的项目如何调用接口决定，也可在 vueX 中获取登录保存的token和code// getCookieToken 获取token，getCookieCode 获取codeaxios({method: 'post',url: process.env.VUE_APP_BASE_IMS_BUSINESS +'sm-scxxh/scProjInfo/importCommitExcelData',headers: {'Blade-Auth': getCookieToken(),code: getCookieCode(),'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},timeout: 1000000,data: FormDatas}).then((response) => {if(response.data.code == 200) {this.$message({title: '成功',message: response.data.msg,type: 'success',duration: 2000})this.dialogVisible = false// 导入完成，重新调取列表接口，重新渲染表格this.getList()} else {this.$message({title: '失败',message: response.data.msg,type: 'warning',duration: 2000})this.dialogVisible = false}})
},

有问题请留言。