Vue实现excel导入

excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件

npm install xlsx@0.16.9 // 注意版本过高可能无法使用

UploadExcel文件，有基本样式，可修改

<template><div class="upload-excel"><div class="btn-upload"><el-button :loading="loading" size="mini" type="primary" @click="handleUpload">点击上传</el-button></div><input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"><div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"><i class="el-icon-upload" /><span>将文件拖到此处</span></div></div>
</template><script>
// 导入
import XLSX from 'xlsx'export default {props: {beforeUpload: Function, // eslint-disable-lineonSuccess: Function // eslint-disable-line},data() {return {loading: false,excelData: {header: null,results: null}}},methods: {generateData({ header, results }) {this.excelData.header = headerthis.excelData.results = resultsthis.onSuccess && this.onSuccess(this.excelData)},handleDrop(e) {e.stopPropagation()e.preventDefault()if (this.loading) returnconst files = e.dataTransfer.filesif (files.length !== 1) {this.$message.error('Only support uploading one file!')return}const rawFile = files[0] // only use files[0]if (!this.isExcel(rawFile)) {this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')return false}this.upload(rawFile)e.stopPropagation()e.preventDefault()},handleDragover(e) {e.stopPropagation()e.preventDefault()e.dataTransfer.dropEffect = 'copy'},handleUpload() {this.$refs['excel-upload-input'].click()},handleClick(e) {const files = e.target.filesconst rawFile = files[0] // only use files[0]if (!rawFile) returnthis.upload(rawFile)},upload(rawFile) {this.$refs['excel-upload-input'].value = null // fix can't select the same excelif (!this.beforeUpload) {this.readerData(rawFile)return}const before = this.beforeUpload(rawFile)if (before) {this.readerData(rawFile)}},readerData(rawFile) {this.loading = truereturn new Promise((resolve, reject) => {const reader = new FileReader()reader.onload = e => {const data = e.target.resultconst 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 = falseresolve()}reader.readAsArrayBuffer(rawFile)})},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},isExcel(file) {return /\.(xlsx|xls|csv)$/.test(file.name)}}
}
</script><style scoped lang="scss">
.upload-excel {display: flex;justify-content: center;margin-top: 100px;.excel-upload-input{display: none;z-index: -9999;}.btn-upload , .drop{border: 1px dashed #bbb;width: 350px;height: 160px;text-align: center;line-height: 160px;}.drop{line-height: 80px;color: #bbb;i {font-size: 60px;display: block;}}
}
</style>

注册全局的导入excel组件

import UploadExcel from './UploadExcel'
export default {install(Vue) {Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件}
}

创建import路由组件

<template><!-- 公共导入组件 --> <upload-excel :on-success="success" />
</template>

配置路由

{path: '/import',component: Layout,children: [{path: '', // 二级路由path什么都不写 表示二级默认路由component: () => import('@/views/import')}]},

获取导入的excel数据, 导入excel接口

<template><div><upload-excel :on-success="handleSuccess" /></div>
</template><script>
import { importEmployee } from '@/api/employees'
export default {name: 'Import',// created() {//   this.handleSuccess()// },methods: {formatDate(numb, format) {const time = new Date((numb - 1) * 24 * 3600000 + 1)time.setYear(time.getFullYear() - 70)const year = time.getFullYear() + ''const month = time.getMonth() + 1 + ''const date = time.getDate() - 1 + ''if (format && format.length === 1) {return year + format + month + format + date}return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)},// 格式化函数// 1.中文字段转英文字段// 2.还原exxel中的日期(转为英文格式)formatData(header, results) {const mapInfo = {入职日期: 'timeOfEntry',手机号: 'mobile',姓名: 'username',转正日期: 'correctionTime',工号: 'workNumber',部门: 'departmentName',聘用形式: 'formOfEmployment'}// 数组转数组mapconst data = results.map(obj => {// obj是姓名：xxx 手机号：xxxxconst newObj = {}// 对于所有的obj的属性来说// Object.keys(obj)===>['姓名'手机号']Object.keys(obj).forEach(zhkey => {// 从中文的key转成英文的keyconst enKey = mapInfo[zhkey]// 判断key如果是日期的话if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {// 对日期做特殊的处理,使用函数处理事件对象// new Date('2020-12-12')做这个转换，是因为后端需要的标准日期格式newObj[enKey] = new Date(this.formatDate(obj[zhkey], '/'))} else {// value不变newObj[enKey] = obj[zhkey]}})return newObj})return data},async handleSuccess({ header, results }) {// 1. 格式转换const data = this.formatData(header, results)console.log('做格式转换之后', data)// 2.发请求const res = await importEmployee(data)console.log(res)this.$router.back()// console.log('做格式转换之前', data)// console.log(header, results)// 后退}}
}
</script>

Vue实现excel导入相关推荐

Vue 实现 Excel 导入功能
前言在实际开发中导入功能是非常常见的,导入功能前端并不难,难的是后端字段的对应,主要处理在后端. 我们只需要用饿了吗ui upload上传组件封装一层就可以了,主要起到上传文件作用. 通过按钮跳转到 ...
VUE的Excel导入导出功能
在做人力资源管理的后台项目时,实现了excel表的导入导出功能.用到了vue-element-admin提供的框架(链接地址 ),我们只需要在自己的项目中封装改造即可. 项目中实现excel表的导入与 ...
SpringBoot+Vue实现excel导入带格式化的时间参数(moment格式化明天日期并设置el-date-picker默认值)
场景若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出: 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导 ...
Vue:将Excel导入的数据中文key转换为英文
在实现Excel导入数据到网页中时,经常容易遇到的一个问题就是key的语言不统一,后端接口常规统一要求接收英文,所以我们要将key统一成英文. 下面是后端接口要求的示例格式处理内容:字段中文转英文. ...
vue 实现 excel 导入(一)
1.创建监听器 import com.alibaba.excel.context.AnalysisContext; import com.alibaba.excel.event.AnalysisEve ...
vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据
前言: 以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库:从而实现数据库的存入流程.但是这也带来了一些问题,首 ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
vue之Excel导出和导入
vue之Excel导出和导入 vue之Excel导出和导入 Excel导入 Excel导出 Excel多级表头导出 vue之Excel导出和导入 Excel导入注意:多级表头的Excel导出排版出现 ...

Vue实现excel导入

获取导入的excel数据, 导入excel接口

Vue实现excel导入相关推荐

最新文章

热门文章