位置: IT常识 - 正文

【前端】批量导入和导出Excel数据(前端批量下载图片)

编辑:rootadmin
【前端】批量导入和导出Excel数据 1.准备

推荐整理分享【前端】批量导入和导出Excel数据(前端批量下载图片),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端批量删除功能,前端批量删除功能,前端导入导出,前端批量下载图片,前端批量删除功能,前端批量导入,前端批量上传图片,前端批量上传图片,内容如对您有帮助,希望把文章链接给更多的朋友!

excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件,读取和写入都依赖她

$ npm i xlsx@0.17.0

vue-element-admin模板提供了一个导入excel数据的文件,我们只需用即可

代码地址:https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue

将vue-element-admin提供的导入功能新建一个组件,位置:src/components/UploadExcel/index.vue

<template><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">将文件拖到此处<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">点击上传文件</el-button></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>.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>

我们在需要导入和导出excel的index页面引入此组件

分析一下上面的代码,需要我们传入onSuccess函数

2.实现excel导入

首先我们封装一个向后端请求 数据的接口

/** ** 封装一个导入员工的接口,data是数组** ***/export function importEmployee(data) {return request({url: '/sys/user/batch',method: 'post',data})}

我们传入onSuccess函数

<template><!-- 公共导入组件 --><upload-excel :on-success="success" /></template>import { importEmployee } from '@/api/employees'// 在methods中修改success函数async success({ header, results }) {console.log(results)//results就是我们通过excel导入进来的数据,之后需要把他传递给后端}

从excel导进来的数据是数组,里面一堆员工信息对象,key值是中文,需要转化成英文导入

import { importEmployee } from '@/api/employees'// 在methods中修改success函数async success({ header, results }) {// 如果是导入员工//header中的数据是中文,results中的数据也是中文,要和新增的员工的属性是一致的//定义一个映射关系对象const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}// map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值var newArr = results.map(item => {var userInfo = {}Object.keys(item).forEach(key => {userInfo[userRelations[key]] = item[key]// 相当于 userInfo[mobile]=mobile这种})return userInfo})await importEmployee(newArr) // 调用导入接口,newArr就是转化好的数据,向后端发起请求this.$message.success('导入excel成功')}

但是此时 时间格式不对,当excel中有日期格式的时候,实际转化的值为一个数字,我们需要一个方法进行转化

excel时间转换 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)} async success({ header, results }) {// console.log(header, results)// results里是 [{…}, {…}, {…},],每一个对象里和userRelations一样// 自定义一个映射关系const userRelations = {'入职日期': 'timeOfEntry','手机号': 'mobile','姓名': 'username','转正日期': 'correctionTime','工号': 'workNumber'}// 把中文的key变成英文var newArr = results.map(item => {var userInfo = {}// Object.keys(item)得到 ['手机号', '姓名', '入职日期', '转正日期', '工号']Object.keys(item).forEach(key => {if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {console.log(item[key])// 44937console.log(this.formatDate(item[key]))// 20230210console.log(new Date(this.formatDate(item[key], '/')))// Tue Feb 21 2023 00:00:00 GMT+0800 (中国标准时间)userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/'))} else {userInfo[userRelations[key]] = item[key]}})return userInfo})// 请求接口await importEmployee(newArr)this.$message.success('导入excel成功')},// 格式化excel时间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)}3.实现excel导出

Excel 的导入导出都是依赖于js-xlsx来实现的。

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

npm install xlsx@0.17.0 file-saver -Snpm install script-loader -S -D //懒加载,运行和开发时都用到

由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以使用的时候建议使用懒加载。使用方法如下:

/*懒加载script-loader的作用,等点击导出按钮时候才会引入这个包然后才会执行导出的方法import('@/vendor/Export2Excel').then ,意思是先引入包,包引入成功后执行then后得操作,then的参数excel就是包导出的内容,内容里有excel.export_json_to_excel方法里的东西*/import('@/vendor/Export2Excel').then(excel => {excel.export_json_to_excel({header: tHeader, //表头 必填data, //具体数据 必填 [[],[]]filename: 'excel-list', //非必填autoWidth: true, //非必填bookType: 'xlsx' //非必填})})

参数

说明

类型

可选值

默认值

header

导出数据的表头

Array

/

[]

data

导出的具体数据

Array

/

[[],[]...]

filename

导出文件名

String

/

excel-list

【前端】批量导入和导出Excel数据(前端批量下载图片)

autoWidth

单元格是否要自适应宽度

Boolean

true / false

true

bookType

导出文件类型

String

xlsx, csv, txt, more

xlsx

我们现在的数据是这种格式

需要变成这种格式才能导出,他没有key,只有value

我们最重要的一件事,就是把表头和数据进行相应的对应

因为数据中的key是英文,想要导出的表头是中文的话,需要将中文和英文做对应

// 导出excel数据exportData() {// 做操作// 表头对应关系const headers = {'姓名': 'username','手机号': 'mobile','入职日期': 'timeOfEntry','聘用形式': 'formOfEmployment','转正日期': 'correctionTime','工号': 'workNumber','部门': 'departmentName'}// 懒加载import('@/vendor/Export2Excel').then(async excel => {// page: this.page.total 的目的是要一次性把全部的员工列表查询出来//获取所有员工数据的接口const { rows } = await getEmployeeList({ page: 1, size: this.page.total })// [["张三", "13811111111","2018","1", "2018", "10002"],["李思", "13911111111","2018","1", "2018", "10002"],...]const data = this.formatList(headers, rows)excel.export_json_to_excel({header: Object.keys(headers),//表头data,//把转化好格式的data放这里,data是[[],[]..]格式filename: '员工信息表',autoWidth: true,bookType: 'xlsx'})})},// 该方法负责将数组转化成二维数组formatList(headers, rows) {// 首先遍历数组// [{ username: '张三', mobile: '13811111111', ...},{},{}] => [[’张三', '13811111111',...],[],[]]return rows.map(item => {// Object.keys(headers) => ['姓名','手机号',...]return Object.keys(headers).map(key => {return item[headers[key]] // 张三, 13811111111, 2018, ...}) // => ["张三", "13811111111","2018","1", "2018", "10002"]}) // [["张三", "13811111111","2018","1", "2018", "10002"],["李四", "13911111111","2018","1", "2018", "10002"]]}

此时导出来的数据就是[[],[]..]数组包数组的格式

但是发现日期和聘用形式不对,下面还需要格式化日期

function formatDate(date, fmt = 'yyyy-MM-dd') {if (!(date instanceof Array)) {date = new Date(date)}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))}const o = {'M+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'m+': date.getMinutes(),'s+': date.getSeconds()}for (const k in o) {if (new RegExp(`(${k})`).test(fmt)) {const str = o[k] + ''fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))}}return fmt}

聘用形式需要改成文字形式,这个文件在src\api\constant\employees.js下,需要导入

1对应正式,2对应非正式

import EmployeeEnum from '@/api/constant/employees' // 员工信息的枚举formatList(headers, rows) {// console.log(rows)// [{},{},{}]// 需要把 [{ username: '张三', mobile: '13811111111', ...},{},{}] => [[’张三', '13811111111',...],[],[]]// 需要把每个对象里的value取出来组成数组,所以需要把每个对象里的key找到return rows.map(item => {// item是每个员工信息的对象return Object.keys(headers).map(key => { // key是手机号,姓名..if (headers[key] === 'timeOfEntry' || headers[key] === 'correctionTime') {return formatDate(item[headers[key]])} else if (headers[key] === 'formOfEmployment') {const isRepeat = EmployeeEnum.hireType.find(obj => {// 查找数组中符合条件的第一个元素return obj.id === item[headers[key]]})return isRepeat ? isRepeat.value : '未知'}// headers[key]是mobile,usernamereturn item[headers[key]]})})}复杂表头的导出(拓展)

需要添加两个额外的参数

参数

说明

类型

可选值

默认值

multiHeader

复杂表头的部分

Array

/

[[]]

merges

需要合并的部分

Array

/

[]

multiHeader里面是一个二维数组,里面的一个元素是一行表头,假设你想得到一个如图的结构

const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']

multiHeader中的一行表头中的字段的个数需要和真正的列数相等,假设想要跨列,多余的空间需要定义成空串

它主要对应的是标准的表头

如果,我们要实现其合并的效果, 需要设定merges选项

const merges = ['A1:A2', 'B1:F1', 'G1:G2']

merges的顺序是没关系的,只要配置这两个属性,就可以导出复杂表头的excel了

本文链接地址:https://www.jiuchutong.com/zhishi/288024.html 转载请保留说明!

上一篇:一只正在树上吃东西的山地大猩猩,乌干达布恩迪国家公园 (© Robert Haasmann/Minden Pictures)(一只正在树上吃的苹果)

下一篇:uniapp使用高德JS API(uniapp使用高德猎鹰服务)

  • 电脑重启一直转圈(电脑重启的原因)(电脑重启一直转圈可以关机吗)

    电脑重启一直转圈(电脑重启的原因)(电脑重启一直转圈可以关机吗)

  • 小米10s asph镜头是什么意思(小米10s asph镜头摔裂了怎么办)

    小米10s asph镜头是什么意思(小米10s asph镜头摔裂了怎么办)

  • win7字体大小怎么设置(win7 字体大小)

    win7字体大小怎么设置(win7 字体大小)

  • imessage特效对方看不到怎么办

    imessage特效对方看不到怎么办

  • 伊对不认证不能聊天吗(伊对不实名就用不了吗)

    伊对不认证不能聊天吗(伊对不实名就用不了吗)

  • 内存卡能当导航卡用吗(插内存卡的导航可以换别的地图吗)

    内存卡能当导航卡用吗(插内存卡的导航可以换别的地图吗)

  • 华为nova7截屏怎么截(华为nova7手机截图)

    华为nova7截屏怎么截(华为nova7手机截图)

  • 苹果8左上角阴影怎么消除(iphone8p左上角)

    苹果8左上角阴影怎么消除(iphone8p左上角)

  • 固态硬盘256g科学分区(固态硬盘256g的一般多少钱)

    固态硬盘256g科学分区(固态硬盘256g的一般多少钱)

  • 淘宝退货淘金币会退回吗(淘宝退货淘金币和红包怎么办吗)

    淘宝退货淘金币会退回吗(淘宝退货淘金币和红包怎么办吗)

  • 格力gmv是什么系列(格力空调gmv是第几代)

    格力gmv是什么系列(格力空调gmv是第几代)

  • 打电话显示线路忙是什么意思(打电话显示线路忙怎么解决)

    打电话显示线路忙是什么意思(打电话显示线路忙怎么解决)

  • 电脑删除文件显示在另一个程序打开怎么办(电脑删除文件显示文件正在使用)

    电脑删除文件显示在另一个程序打开怎么办(电脑删除文件显示文件正在使用)

  • 快手上的小助手在哪里(快手上的小助手怎么关闭)

    快手上的小助手在哪里(快手上的小助手怎么关闭)

  • 抖音举报了别人 为什么别人还可以登录(抖音举报了别人怎么看反馈)

    抖音举报了别人 为什么别人还可以登录(抖音举报了别人怎么看反馈)

  • 微信特别关注有什么用(vx特别关注)

    微信特别关注有什么用(vx特别关注)

  • 笔记本电脑收不到Wi-Fi是怎么回事(笔记本电脑收不到自家的wifi信号)

    笔记本电脑收不到Wi-Fi是怎么回事(笔记本电脑收不到自家的wifi信号)

  • iphone8有面部解锁吗(iphone8p能面部解锁)

    iphone8有面部解锁吗(iphone8p能面部解锁)

  • 芯片的主要作用是什么(马里亚纳芯片的主要作用)

    芯片的主要作用是什么(马里亚纳芯片的主要作用)

  • 抖音短视频属于腾讯吗(抖音短视频属于自媒体吗?)

    抖音短视频属于腾讯吗(抖音短视频属于自媒体吗?)

  • ipad如何用话费打电话(ipad怎么查看话费余额)

    ipad如何用话费打电话(ipad怎么查看话费余额)

  • vivo手机怎么显示双卡(vivo手机怎么显示时间和日期)

    vivo手机怎么显示双卡(vivo手机怎么显示时间和日期)

  • 手机qq空间怎么删除访问记录(手机qq空间怎么设置访问权限)

    手机qq空间怎么删除访问记录(手机qq空间怎么设置访问权限)

  • ios13查找怎么输入id(ios13查找我的iphone怎么用)

    ios13查找怎么输入id(ios13查找我的iphone怎么用)

  • 铃声多多下载的在哪里(铃声多多下载的歌曲在哪个文件夹)

    铃声多多下载的在哪里(铃声多多下载的歌曲在哪个文件夹)

  • 怎么设置微信投票次数(微信投屏怎么设置方法)

    怎么设置微信投票次数(微信投屏怎么设置方法)

  • 永久封空间怎么看相册(永久封空间怎么解封)

    永久封空间怎么看相册(永久封空间怎么解封)

  • 拼多多留言在哪里(拼多多下单在那留言)

    拼多多留言在哪里(拼多多下单在那留言)

  • win10445端口关闭方法是什么(win10关闭端口号)

    win10445端口关闭方法是什么(win10关闭端口号)

  • 6.72的税率是怎么算的
  • 房地产企业增值税计算
  • 工会经费按什么比例交
  • 产品分成方式取得收入什么意思举例
  • 税点是什么费用
  • 计提税金及附加会计分录
  • 营业成本占营业收入比重较低的原因
  • 租赁费进项税可以抵扣吗
  • 品质问题扣供应商款
  • 购进的材料没有发票可以入库吗?
  • 进项税申报但未抵扣
  • 提前报废资产损失税前扣除
  • 土建税率是多少
  • 电子发票真伪查询
  • 上季度多交的增值税怎么做账
  • 公允价值变动损益属于损益类的
  • 纸巾可以开专票吗
  • 一般纳税人增票流程
  • 取得海运费发票怎么入账
  • 外汇的收入
  • 汇算清缴工资调增,账务要处理吗
  • 发出商品是在产品吗
  • 复制粘贴如何提取文字
  • 房贷贷款利息计算
  • php的八种类型
  • 债券溢价或折价是公司发行债券时产生的收益或损失
  • 工业企业应付会计工作内容
  • echarts右侧y轴
  • 武侯祠红墙在哪个门
  • 购买商品的会计分录贷方能写应付账款
  • 产品体验是什么意思
  • 发票密码什么意思
  • lstm crf
  • uniapp获取手机通讯录
  • 中秋快乐的祝福语怎么说
  • vue自学
  • php读取php文件内容
  • laravel 实例
  • 季初从业人数和季末从业人数怎么填
  • python处理数据教程
  • js必学知识点
  • dedecms安装步骤
  • 特殊银行账户上限
  • python中numpy.empty()函数的用法
  • dedecms 授权
  • 收取水电费计入什么科目
  • sqlserver2008不存在或拒绝访问怎么办
  • 红冲以前年度的费用怎么做账
  • 用友t3软件财务软件具体操作
  • 关于赠品的财务处理
  • 个人所得税不允许核定的行业
  • 工会经费支出审批表
  • 财产租赁所得是指
  • 快递费用是否可以开发票
  • 工程施工人工费如何结转
  • 个体工商户可以变更法人吗
  • 企业年度报告中的什么信息由企业选择是否向社会公示
  • 填收入与成本明细怎么填
  • mysql的innodb和myisam
  • linux命令和命令之间用
  • u盘怎么安装驱动程序
  • 如何删除已下载的windows更新
  • symsrv.dll 病毒专杀
  • 在windows下把绿色程序添加到鼠标右键的方法
  • 用xp系统打造
  • 安装win7系统后无法引导启动
  • mgaqdesk.exe进程有什么作用 mgaqdesk进程查询
  • qq空间好友评论别人看不到
  • win8系统怎么设置桌面
  • win10多用户独立
  • android viewpager
  • jquery form表单
  • jquery添加兄弟元素
  • 解决在基层
  • android activity回调函数
  • 票据代码和票据号码是什么意思
  • 无锡市高新区税务局张贤平
  • 预交增值税税款退税流程
  • 惠济区第五中学怎么样
  • 云南 过年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设