excel 的导入

npm i xlsx

类似功能, vue-element-admin 已经提供代码地址

封装公共组件 UploadExcel.vue

<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" scoped>
.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>

 async  success({ header, results }) {const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}const arr = []// 遍历所有的数组results.forEach(item => {// 需要将每一个条数据里面的中文都换成英文const userInfo = {}Object.keys(item).forEach(key => {// key是当前的中文名 找到对应的英文名if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // 只有这样, 才能入库return}userInfo[userRelations[key]] = item[key]})// 最终userInfo变成了全是英文arr.push(userInfo)})await importEmployee(arr)this.$message.success('导入成功')this.$router.push('/employees') // 回到员工页面},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)}

excel 的导入相关推荐

matlab在曲线给命名,matlab 利用xlsread画图,怎么将一组excel数据导入，通过matlab作图...
Matlab 循环 for 语句 xlsread EXCEL表格数据导入画图 Matlab的 xlsread() 函数可以将Excel数据到matlab工作空间,然后就可以根据读入据作图.下面给出操 ...
excel 导入mysql_如何将Excel文件导入MySQL数据库
本文实例为大家分享了Excel文件导入MySQL数据库的方法,供大家参考,具体内容如下 1.简介本博客给大家分享一个实用的小技能,我们在使用数据库时常常需要将所需的Excel数据添加进去,如果按照传 ...
Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)
Excel的导入V2优化版有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...
excel宏转txt替换强制换行符_三个步骤学会用EXCEL批量导入anki题库
Anki真的是个好用到不想推荐给朋友的软件,本人最近准备刷个新题库,找了一上午找不到原来教我EXCEL导入anki的网页,为了防止我自己过段时间又忘了应该怎么导入,我写了这个教程,写都写了,就顺手发出 ...
效率最高的Excel数据导入---（c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】）...
本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 (三)SSIS的简介 (四)数据库中存储过程示例(SSIS应用需要) (五)Excel模板的制作(这步这么简单,稍微介 ...
将txt文件和excel文件导入SQL2000数据库
将txt文件和excel文件导入SQL2000数据库在做一些web数据库管理系统的时候经常要实现将帐户批量注册的功能,今天就来讲讲如何在C#-web项目中将txt文件和excel文件导入SQL200 ...
MVC3学习：将excel文件导入到sql server数据库
思路: 1.将excel文件导入到服务器中. 2.读取excel文件,转换成dataset. 3.循环将dataset数据插入到数据库中. 本例子使用的表格为一个友情链接表F_Link(LinkId, ...
excel数据库_将excel文件导入mysql数据库教程（PHP实现）
点击蓝字关注我们!每天获取最新的编程小知识! 源 / php中文网源 / www.php.cn 在这篇文章中,我将给大家介绍如何使用PHP将excel文件导入mysql数据库.有时候我们需 ...
Excel批量导入数据库
在上个系统中需要用到Excel整体导入的功能整体的核心思路如下: 1. 首先将需要导入的Excel上传至服务器 2. 为了避免文件名重复,重命名上传的Excel文件 3. 将上传的Excel文件读入D ...
利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式
<!DOCTYPE html><html lang= ...

excel 的导入

excel 的导入相关推荐

最新文章

热门文章

excel 的 导入

excel 的 导入相关推荐

最新文章

热门文章

excel 的导入

excel 的导入相关推荐