位置: IT常识 - 正文

基于vue 实现 excel导出导入功能(vue操作excel)

编辑:rootadmin
基于vue 实现 excel导出导入功能 第一步下包excel导入导出功能需要我们下载哪些包?

推荐整理分享基于vue 实现 excel导出导入功能(vue操作excel),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实现表格,vue使用xlsx,vue使用xlsx,vue如何用,vueexcel,vue ext,vueexcel,vue使用xlsx,内容如对您有帮助,希望把文章链接给更多的朋友!

在vue-element-admin中有着详细的文档查看:

Excel 导出

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

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

#使用

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

所以我们需要下载三个包,和一个js文件 Export2Excel

npm install xlsx file-saver -Snpm install script-loader -S -D第二步:各种功能的实现1.1:基本表头导出功能1.2:复杂表头导出功能1.3:excel表格导入功能1.1.1:excel导出逻辑

逆向思维思考:

1-最终要拿到的是一个充满数据的文件

2-如何导出一个文件:用到excel.export_json_to_excel

3-export_json_to_excel方法需要那些参数:

multiHeader:// 多级表头​ header:, //表头 必填​ data: //具体数据 必填​ filename: //表格名字​ merges: //合并单元格​ autoWidth: true, // 是否自适应宽度​ bookType: 'xlsx', //导出格式

4-了解参数的数据类型,接下来将数据转成能够导出的数据类型,也就是处理数据

5-先有数据才能处理数据,所以应该是要拿数据

到现在导出的逻辑已经清楚,那么开始正向梳理一下逻辑

1-发请求拿数据

2-定义方法处理数据

3-调用export_json_to_excel方法导出表格

4-查看导出的表格是否满意

接下来我将用后台人资项目来演示基本的数据导出excel表格

// 1- 获取数据并且处理完的数据 async onExportFn() { // 1-请求获取所有的数据 // {data} 是对请求拿到的数据进行结构 const { data } = await FindStaffList({ page: 1, size: this.total }) // 1-1 此时list里面保存的是所有的员工列表信息 const list = data.rows console.log(list) // 2-2 对数据进行处理 此时FilnalData 拿到的就我们要的数据格式 // 此处我封装成了一个函数 onSortList 并且将拿到的list数据传入该方法 return this.onSortList(list) },

注意一点在这里需要data的数据类型是一个二维数组[[],[],[],....[]] 在vue-element-admin 中有详细的文档,搜索“导出” 或者搜索xlsx即可

// 2-2 对数据进行处理 在这里只是讲获取数据的方法,这是最简单的一种,也可以用map对数据进行处理,方法不一,只列出最简单易理解的onSortList(list) { // 2-1 先定义排列顺序 这里通常有一个学术名叫做对照表 const sortOrder = [ 'username', 'mobile', 'timeOfEntry', 'formOfEmployment', 'correctionTime', 'workNumber', 'departmentName', ] // FilnalData 用来存放最后的数据 const FilnalData = [] list.forEach((item) => { const arr = [] sortOrder.forEach((obj) => { if (obj === 'formOfEmployment') { arr.push(item[obj] === 1 ? '正式' : '非正式') } else { arr.push(item[obj]) } }) FilnalData.push(arr) }) return FilnalData },// 3- 此时数据已经处理完毕,那么就可以调用export_json_to_excel方法来进行导出表格async onOrdinaryExport() { this.ExportLoading = true // onExportFn() 这里是一个primise异步方法,所以要用await const FilnalData = await this.onExportFn() // import('@/vendor/Export2Excel') 懒加载 导入后,拿到excel对象 的对象中有export_json_to_excel 方法 import('@/vendor/Export2Excel').then((excel) => { excel.export_json_to_excel({ header: [ '姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门', ], //表头 必填 data: FilnalData, //具体数据 必填 filename: '员工信息表格', autoWidth: true, bookType: 'xlsx', }) }) this.ExportLoading = false },

如上操作,即可完美导出一份普通的带有表头的表格

1.2.1复杂表头导出功能

复杂表头和基本表头的导出,思考的逻辑是一样的,所以不再赘述

复杂表头的导出,相比基本表头导出,只有在export_json_to_excel中传递的参数多了两个 一个是 multiHeader(多级表头),一个是merges(合并)

通过分析export_json_to_excel.js文件的源代码,我们可以分析出,multiHeader是二维数组,merges是一维数组,数组中的内容是字符串,而且是带有:的字符串

基于vue 实现 excel导出导入功能(vue操作excel)

所以,根据要求,我们可以自由合并单元格

filename = filename || 'excel-list' data = [...data] data.unshift(header) for (let i = multiHeader.length - 1; i > -1; i--) { data.unshift(multiHeader[i]) }

部分源码如图。

data中的数据,首先会先把传过来的数据data解构后放入data中,然后对多级表头进行循环,循环结束,将每个数据push到data中,因为data中的数据是个数组中放的每一个元素是数组

所以multiHeader[i]是数组,所以multiHeader 是二维数组

复杂表头代码如下,与一般表头只有在导出的时候有差别

async onComplexExport() { this.ComplexExportLoading = true // 调用onExportFn方法获取处理完成后的数据 该方法,上面有 const FilnalData = await this.onExportFn() import('@/vendor/Export2Excel').then((excel) => { excel.export_json_to_excel({ multiHeader: [['姓名', '主要信息', '', '', '', '', '部门']], header: [ 'username', 'mobile', 'timeOfEntry', 'formOfEmployment', 'correctionTime', 'workNumber', 'departmentName', ], //表头 必填 data: FilnalData, //具体数据 必填 filename: '复杂表头的员工信息表格', // 要合并的单元格 merges: ['A1:A2', 'B1:F1', 'G1:G2'], autoWidth: true, bookType: 'xlsx', }) }) this.ComplexExportLoading = false },1.3.1:excel表格导入功能

Excel 导入

封装了UploadExcelExcel 导入组件,支持点击和拖拽上传,同样它也是依赖js-xlsx的。

所以要实现导入功能

需要下载三个包,和一个vueUploadExcel组件

npm install xlsx file-saver -Snpm install script-loader -S -D

UploadExcel它提供了两个回调函数:beforeUpload:你可以在上传之前做一些自己的特殊判断,如判断文件的大小是否大于 1 兆?若大于 1 兆则停止解析并提示错误信息。

onSuccess 解析成功时候会触发的回调函数,它会返回表格的表头和内容。

handleSuccess({ results, header }) { this.tableData = results this.tableHeader = header }

导入的功能,总体来说,要比导出简单一些,更加容易理解一下

总结思路

反向思考

1-最终要实现的效果,给当前页面添加几行数据

2-要实现给当前页面添加几行数据,并且是我们看的到数据,因为只有数据才能改变视图,所以我们一定要发请求,才能够将数据添加上

3--发请求,必然要牵扯到请求的参数,那么就要看参数是什么格式的

4-有了参数的格式,那么我们就需要将一个方法,用来将我们得到的数据,转变成参数需要的数据类型

5-要转变,首先要先拿到表格里面的数据,所以这就需要用到我们的UploadExcel组件给我们提供的一个方法onSuccess

到现在导出的逻辑已经清楚,那么开始正向梳理一下逻辑‘

1-下载组件,在页面中导入,使用onSuccess方法,拿到表格的数据 tableData

2-定义一个方法,对拿到的数据进行处理,将数据处理成我们发请求需要的数据

3-定义接口,导入接口,发请求

4-调用接口,重新获取数据,渲染视图

逻辑清楚,代码开始

以下是我对UploadExcel组件的一些源码的分析与整理,只有简单的标注和样式的修改

<template><div class="upload-excel"><div class="btn-upload"><el-button:loading="loading"size="mini"type="primary"@click="handleUpload">点击上传</el-button></div><!-- 隐藏域 --><!-- 2-监听表单的change事件,点击了button按钮,触发 表单点击事件 当选中了文件后,会触发change事件 --><inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"@change="handleClick"/><divclass="drop"@drop="handleDrop"@dragover="handleDragover"@dragenter="handleDragover"><i class="el-icon-upload" /><span>将文件拖到此处</span></div></div></template><script>import * as 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: {// 8-1 generateData 方法,接收两个参数,一个是处理完的表格头数据,一个是表格内容数据generateData({ header, results }) {this.excelData.header = headerthis.excelData.results = results// 8-2 数据处理完成,进入逻辑判断,父传入onSuccess方法 则调用方法,并且传入读取后的表格数据this.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() {// 1- 当点击button按钮的时候触发表单的点击事件this.$refs['excel-upload-input'].click()},handleClick(e) {// 3-1 选中的文件的数组const files = e.target.files//3-2 拿到具体的文件const rawFile = files[0]if (!rawFile) return// 3-3 触发upload方法 同时把当前拿到的文件传过去this.upload(rawFile)},upload(rawFile) {// 4-1 参数rawFile是当前选中的文件 表单清空this.$refs['excel-upload-input'].value = null// 4-2 this.beforeUpload prop传入的方法 表示加载前 有没有选中文件if (!this.beforeUpload) {this.readerData(rawFile)return}// 4-3 将选中的文件,传给父 父可以做一些拦截操作,可以限制文件的大小,类型等等 如果不满足条件返回false 默认返回trueconst before = this.beforeUpload(rawFile)if (before) {this.readerData(rawFile)}},// 5-1 满足条件,进入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)// 7- 在这一步,确认数据已经处理完成 跳转到新的方法generateData()中,并且把处理完的数据{ header, results } 解构后传给这个方法this.generateData({ header, results })this.loading = falseresolve()}reader.readAsArrayBuffer(rawFile)})},// 6 这一块是处理数据 不用详细深究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>

接受onSuccess回调函数中,对数据进行处理

onSuccess(excelData) { // console.log(excelData) 在这里打印的是除了表头之外的数据 也就是我们需要的数据 // 定义一个数据对照表 const contrastObj = { 入职日期: 'timeOfEntry', 姓名: 'username', 手机号: 'mobile', 工号: 'workNumber', 转正日期: 'correctionTime', } // 定义一个空数组,用来保存最后需要发请求的数据 const excelList = [] // 对拿到的数据进行遍历 excelData.results.forEach((item) => { const obj = {} for (const key in item) { if (key === '转正日期' || key === '入职日期') { obj[contrastObj[key]] = formatDate(item[key], '-') } else { obj[contrastObj[key]] = item[key] } } excelList.push(obj) }) // console.log(excelList) // 在这里已经完成数据的整理,调接口,发送请求 },

至此一个完整体系 的 基于vue的表格的导入导出总结完毕,学习愉快

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

上一篇:ChatGPT的api接口接入小程序(api接口使用方法)

下一篇:大数据现在找工作难么(大数据找工作好找吗)

  • 小天才电话手表怎么插卡(小天才电话手表丢了关机怎么找回)

    小天才电话手表怎么插卡(小天才电话手表丢了关机怎么找回)

  • 华为mate30pro可以投屏到墙上吗(华为mate30pro可以扩展内存吗)

    华为mate30pro可以投屏到墙上吗(华为mate30pro可以扩展内存吗)

  • 滴滴封禁有什么办法可以解决(滴滴打车封禁)

    滴滴封禁有什么办法可以解决(滴滴打车封禁)

  • 苹果屏幕使用时间总是几秒(苹果屏幕使用时间)

    苹果屏幕使用时间总是几秒(苹果屏幕使用时间)

  • 华为p30屏幕上有个点点怎么关(华为p30屏幕上有个指纹图案怎么关)

    华为p30屏幕上有个点点怎么关(华为p30屏幕上有个指纹图案怎么关)

  • 笔记本可以外接显卡么(笔记本可以外接显卡打游戏吗)

    笔记本可以外接显卡么(笔记本可以外接显卡打游戏吗)

  • 手机系统缓存能清理吗(手机缓存能恢复吗)

    手机系统缓存能清理吗(手机缓存能恢复吗)

  • 手机中间的按键叫什么(手机中间的按键叫什么名字)

    手机中间的按键叫什么(手机中间的按键叫什么名字)

  • 条形码扫不出来(条形码扫不出来的烟是假烟吗?)

    条形码扫不出来(条形码扫不出来的烟是假烟吗?)

  • 海思970相当于骁龙什么系列的处理器(海思970相当于骁龙哪)

    海思970相当于骁龙什么系列的处理器(海思970相当于骁龙哪)

  • 手机进水开机闪一下就不亮了(手机进水开机闪退)

    手机进水开机闪一下就不亮了(手机进水开机闪退)

  • 打印机型号编码显示不可用(打印机型号编码能更改吗)

    打印机型号编码显示不可用(打印机型号编码能更改吗)

  • qq音乐内测版是每个人都有吗(qq 音乐官方内测)

    qq音乐内测版是每个人都有吗(qq 音乐官方内测)

  • 泰捷盒子支持airplay吗(泰捷盒子支持开机自启吗)

    泰捷盒子支持airplay吗(泰捷盒子支持开机自启吗)

  • pencil充满电能用多久(pencil充电能用多久)

    pencil充满电能用多久(pencil充电能用多久)

  • cdr和ps区别(cdr和ps的区别)

    cdr和ps区别(cdr和ps的区别)

  • 手机号码怎样获得永久使用权(手机号码怎样获得)

    手机号码怎样获得永久使用权(手机号码怎样获得)

  • oppo呼吸灯怎么关(oppo呼吸灯怎么设置二十四小时)

    oppo呼吸灯怎么关(oppo呼吸灯怎么设置二十四小时)

  • 怎么限制别人登录我的淘宝(怎么限制别人登录自己的微信)

    怎么限制别人登录我的淘宝(怎么限制别人登录自己的微信)

  • 删除退群后消息还在吗(删除退出群聊后消息会消失吗)

    删除退群后消息还在吗(删除退出群聊后消息会消失吗)

  • 苹果手机通话声音小怎么调(苹果手机通话声音小怎么调大声)

    苹果手机通话声音小怎么调(苹果手机通话声音小怎么调大声)

  • 魅族手机远程管理怎么用(魅族手机远程操作)

    魅族手机远程管理怎么用(魅族手机远程操作)

  • wifi的wps是什么意思(wifi上的wps是干嘛的)

    wifi的wps是什么意思(wifi上的wps是干嘛的)

  • 华为p30时间在哪里设置(华为p30时间显示设置在哪里)

    华为p30时间在哪里设置(华为p30时间显示设置在哪里)

  • 华为手机搬家在哪(华为手机搬家在哪里找出来)

    华为手机搬家在哪(华为手机搬家在哪里找出来)

  • Linux中计算特定CPU使用率案例详解(linux 计算字符数)

    Linux中计算特定CPU使用率案例详解(linux 计算字符数)

  • 装卸费属于什么费用
  • 一次性扣除固定资产政策案例
  • 应付职工薪酬费用的对应科目
  • 在校大学生可以考教师资格证吗
  • 科目余额表凭证号顺序
  • 运输服务有3%的税率吗
  • 增值税需要计入入账价值吗
  • 职工教育经费能结转几年
  • 会计信息采集审核需要多久
  • 房地产开发企业预收款预缴增值税
  • 收取招标代理费会计分录
  • 低值易耗品按三年摊销吗
  • 企业无法收回的账款
  • 公司进项票不够怎么回事
  • 营改增后征收增值税的税目
  • 注销地税需要什么资料
  • 工会经费计税依据是应发工资还是实发工资
  • 审计费用收取标准的2020
  • 加计扣除汇算清缴怎么调减
  • 小规模纳税人日用品增值税税率
  • 费用,资产,成本,损失的区别
  • 利润表中财务费用可以为负数吗
  • 非正常损失和非正常损耗的区别
  • 关联公司代付款帐怎么做
  • 营改增后还要交营业税吗
  • window10最新20h2
  • 苹果6s自动清理
  • PHP:token_name()的用法_Tokenizer函数
  • 企业类型变更是什么意思
  • 法恩达尔的信
  • 短期借款产生的利息进入总账吗
  • php+mysql+jquery实现日历签到功能
  • 专项应付款怎么冲销
  • vue中proxy代理?
  • zgrep命令详解
  • mysqldump命令不存在
  • 慰问金计入什么预算科目
  • 待处理财产损溢增加是哪方
  • 主营业务成本可以设置二级科目吗
  • mongodb集群启动顺序
  • Python中input输入多行文本
  • 招待客户发生的住宿费可以抵扣吗
  • 政府补助会计处理方法
  • 缴纳的税费怎么计算
  • 普通发票需要做合同才能开吗
  • 金税盘申报流程视频
  • 境外汇款免税
  • 自然灾害的原因有哪些
  • 道路交通事故中施救费应如何处理?
  • 固定资产的资本化和费用化
  • 自产自销免税发票可以抵税吗
  • 从银行提取现金分录
  • 五证合一办理步骤
  • 软件属于无形资产什么类别
  • 什么是建账户
  • sql server安装完 C盘空间一直减少
  • sql服务在哪
  • 开源操作系统年度技术会议
  • svchost一直在下载什么
  • xp系统玩英雄联盟出现win32
  • bios里怎么找不到usb启动
  • Linux进入图形界面卡顿
  • win8进入电脑休眠后怎么唤醒
  • win7系统添加右键菜单在哪里设置
  • 'GL_COMBINE_ARB' : undeclared 'GL_RGB_SCALE_ARB' : undeclared 问题
  • opengl编程宝典
  • 正则表达\d
  • 命令以管理员运行
  • shell替换文件中指定行的指定内容
  • JavaScript中的方法名不区分大小写
  • jquery左右选择框
  • unity as
  • 安卓网络管理类app
  • android系统主要特点
  • 以非gradle方式将 Eclipse 项目导入Android Studio
  • 税务局三级主办是副科吗
  • 我们要什么行政执法监督机制和能力建设严格落实行政
  • 如何查询车辆购买的保险
  • 外商投资的企业
  • 深圳沙井社保局在哪个位置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设