位置: IT常识 - 正文

使用vue,实现前端导入excel数据(vue前端怎么运行)

编辑:rootadmin
使用vue,实现前端导入excel数据

推荐整理分享使用vue,实现前端导入excel数据(vue前端怎么运行),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实用技巧,vue前端怎么运行,vue前端代码实例,vue前端代码实例,vue前端代码实例,vue 使用,vue前端项目怎么运行,怎么用vue写前端,内容如对您有帮助,希望把文章链接给更多的朋友!

文章目录

前言一、引入组件二、封装导入功能的组件

1.编写组件template2.获取数据3.调用接口把数据传给后端三、总结前言

继前边的vue的导出功能后,自己又去在网上搜了vue导入excel一些文章,自己通过对代码的整理和调整,实现了vue导入excel的功能。

一、主界面先引入导入组件

1.这段主要是中间的那段excel-import标签的那部分代码,loadList是后边导入成功后,子组件要调用的方法,这个方法是导入成功后,刷新表格数据的

<a-space class="crud-buttons"> <a-button @click="handleEdit" type="primary"> <a-icon type="edit"></a-icon> 修改 </a-button> <excel-import @fatherMethod="loadList"></excel-import> <a-button @click="exportData" type="danger" :loading="btnLoading"> <a-icon type="upload" />导出</a-button> <a-button type="primary" @click="grantWelfare"> <a-icon type="plus"></a-icon> 发放 </a-button> </a-space>

使用vue,实现前端导入excel数据(vue前端怎么运行)

  路径根据你们的要求自行修改

import excelImport from "../../components/excel-import"二、封装excel-import组件1.首先是template代码(这里用的是ant vue desgin框架的组件)<template> <div class="import"> <a-button @click="exportData" type="primary"><a-icon type="import" />导入</a-button> <a-modal v-model="visible" title="导入数据" @ok="handleOk" @cancel="handleCancel" width="400px"> <a-upload-dragger :file-list="fileList" :multiple="false" :before-upload="beforeUpload" :remove="removeFile"> <p class="ant-upload-drag-icon"> <a-icon type="inbox"/> </p> <p class="ant-upload-hint"> 仅允许导入xls、xlsx格式文件 </p> </a-upload-dragger> </a-modal> </div></template>

2.引入接口import WelfareApi from '@/api/master/welfare'3.js代码methodsexportData(){ this.visible=true }, async handleOk(){ if (this.data.length === 0) { this.$message.error("请选择要上传的文件") } else { const data=await WelfareApi.importExcelData(this.data) this.$message.success(data.message) this.visible=false; this.fileList=[] this.$emit('fatherMethod'); } }, handleCancel(){ this.fileList=[] this.visible=false }, // 文件上传前的钩子 beforeUpload(file) { const isXslx = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type === "application/vnd.ms-excel"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isXslx) { this.$message.error("附件格式错误,请删除后重新上传!"); } if (isXslx) { if (this.fileList.length == 0) { this.fileList = [...this.fileList, file] this.importfxx(this.fileList); } else { this.$message.error("仅能选择一个文件进行上传!") } } if (!isLt2M) { this.$message.error("上传文件大小不能超过 2MB!"); } return false }, removeFile(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, importfxx(obj) { let _this = this; let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 this.file = event.currentTarget.files[0]; let rABS = false; //是否将文件读取为二进制字符串 let f = this.file; let reader = new FileReader(); FileReader.prototype.readAsBinaryString = function (f) { let binary = ""; let rABS = false; //是否将文件读取为二进制字符串 let pt = this; let wb; //读取完成的数据 let outdata; let reader = new FileReader(); reader.onload = function (e) { let bytes = new Uint8Array(reader.result); let length = bytes.byteLength; for (let i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } //此处引入,用于解析excel let XLSX = require("xlsx"); if (rABS) { wb = XLSX.read(btoa(fixdata(binary)), { //手动转化 type: "base64" }); } else { wb = XLSX.read(binary, { type: "binary" }) } outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是读取的数据(不包含标题行即表头,表头会作为对象的下标) //此处可对数据进行处理 let arr = []; outdata.map(v => { let obj = {} obj.id = v['序号'] obj.dpStage = v['DP班号'] obj.traineeName = v['学员姓名'] obj.name = v['收货人姓名'] obj.mobile = v['收货人电话'] obj.province = v['省'] obj.city = v['市'] obj.district = v['区'] obj.detailAddr = v['详细地址'] obj.expressName = v['快递名称'] obj.expressNumber = v['快递编号'] obj.expressTime = v['发货时间'] obj.statusName = v['状态'] arr.push(obj) }); _this.data=arr; _this.dalen=arr.length; return arr; }; reader.readAsArrayBuffer(f); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }

这里有几点注意的地方

在对outdata处理的时候,例如obj.id=v['序号']

这里的id就是传给后端的对象集合中对象的属性名,后端也要用对应的model接收

这里的序号就是excel表格的表头列名,一定要文字对应,不然会导入失败

三.附加提示(后端也要写的小伙伴可以参考下边建议哈)

我们传给后端的数据,应该是一个集合形式,在后端一般需要对数据进行处理,因为我们要把数据insert到我们的数据库中去,当然可能会有重复的数据(比如说导入的是用户信息,数据库里存在这个人的,你要导入的excel也存在)如果要求是修改的话,这时候就要根据的唯一标识(id,或者是电话、身份证号等等)来分情况做处理到底是新增还是修改。最后我还建议可以设置两个变量,一个来记录成功导入数据库的记录数量,一个记录覆盖(修改)记录的数量,然后返回给前端。

四.总结

以上就是今天要讲的内容,本文介绍了vue导入excel的使用,主要就是在前端把要导入的excel进行处理,最后把整理好的数据传给后端,添加进数据库中。谢谢小伙伴的观看!

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

上一篇:【GPT4】微软 GPT-4 测试报告(1)总体介绍(微软 gcr)

下一篇:【路径规划】A*算法方法改进思路简析(路径规划原理)

  • 抖音视频封面图片怎么设置(抖音视频封面图怎么保存)

    抖音视频封面图片怎么设置(抖音视频封面图怎么保存)

  • 苹果11语音唤醒功能在哪里(苹果11语音唤醒功能在哪里打开)

    苹果11语音唤醒功能在哪里(苹果11语音唤醒功能在哪里打开)

  • 华为手机指南针怎么校准(华为手机指南针不动是什么原因)

    华为手机指南针怎么校准(华为手机指南针不动是什么原因)

  • sendencpac文件是什么(sendencpacbin文件能删吗)

    sendencpac文件是什么(sendencpacbin文件能删吗)

  • 主板和cpu怎么搭配(主板和cpu怎么搭建)

    主板和cpu怎么搭配(主板和cpu怎么搭建)

  • 苹果8是lcd屏幕吗(苹果8的lcd屏什么水平)

    苹果8是lcd屏幕吗(苹果8的lcd屏什么水平)

  • word表格怎么插入列(word表格怎么插分隔符)

    word表格怎么插入列(word表格怎么插分隔符)

  • 滴滴接不到单怎么回事(滴滴接不到单子怎么办)

    滴滴接不到单怎么回事(滴滴接不到单子怎么办)

  • 支持novell网络的协议是(novell网有什么特点)

    支持novell网络的协议是(novell网有什么特点)

  • ios12比ios11多了什么功能(ios11和ios12哪个占内存)

    ios12比ios11多了什么功能(ios11和ios12哪个占内存)

  • 苹果平板电脑变形怎么办(苹果平板电脑变形图片大全)

    苹果平板电脑变形怎么办(苹果平板电脑变形图片大全)

  • 相机里峰值什么意思(相机 峰值)

    相机里峰值什么意思(相机 峰值)

  • 华为手机账号是什么意思(华为手机账号是别人的有什么影响吗)

    华为手机账号是什么意思(华为手机账号是别人的有什么影响吗)

  • 为什么qq老是无响应(为什么qq老是无响应怎么回事vivo)

    为什么qq老是无响应(为什么qq老是无响应怎么回事vivo)

  • 微客pro是腾讯的么(微客pro官网)

    微客pro是腾讯的么(微客pro官网)

  • ipada8122是苹果几代(ipad型号是a1822是哪款)

    ipada8122是苹果几代(ipad型号是a1822是哪款)

  • 热点网速太慢怎么办(热点网速太慢了)

    热点网速太慢怎么办(热点网速太慢了)

  • 华为play是全网通吗(华为play是什么)

    华为play是全网通吗(华为play是什么)

  • 华为mate30有屏幕指纹吗(华为mate30有屏幕共享吗)

    华为mate30有屏幕指纹吗(华为mate30有屏幕共享吗)

  • 怎样查电脑浏览器版本(怎样查电脑浏览记录历史)

    怎样查电脑浏览器版本(怎样查电脑浏览记录历史)

  • 苹果x的话筒位置是哪里(苹果x话筒坏了怎么办)

    苹果x的话筒位置是哪里(苹果x话筒坏了怎么办)

  • 微关爱无需对方点击吗(微关爱怎么解除对方禁止管理)

    微关爱无需对方点击吗(微关爱怎么解除对方禁止管理)

  • 抖音里一张照片怎么生成视频(抖音一张照片一首歌)

    抖音里一张照片怎么生成视频(抖音一张照片一首歌)

  • 苹果1x信号是什么意思(苹果1x信号什么意思)

    苹果1x信号是什么意思(苹果1x信号什么意思)

  • 微信提现一天最多能提多少(微信提现一天最高多少)

    微信提现一天最多能提多少(微信提现一天最高多少)

  • 1t硬盘最优分区(1t硬盘分4个区最好)

    1t硬盘最优分区(1t硬盘分4个区最好)

  • YOLO-V5轻松上手(yolo v5超详细解析)

    YOLO-V5轻松上手(yolo v5超详细解析)

  • 企业所得税年报申报时间
  • 小规模免增值税是普票还是专票
  • 固定资产一次性扣除政策文件
  • 非流动资产处置损失属于什么会计科目
  • 增值税专票劳务费怎么开
  • 以股权入股要交税吗?
  • 收到别人的承兑怎么入账
  • 公账发工资是即时到账吗
  • 民间非营利组织会计制度
  • 增值税电子普通发票可以抵扣吗
  • 物流公司的保险服务属于什么费用
  • 地下车库是否需要设置消防电梯?
  • 长期待摊费用与折旧区别
  • 个人代收工程款分录
  • 网络服务费一般纳税人几个点
  • 发票产生的材料是什么
  • 应付职工薪酬包括个人社保和个税吗
  • 企业接受个人捐赠
  • bios怎么更改硬盘
  • 上月多计提的所得税怎么做分录
  • 支付的费用没有发票能入费用科目吗
  • php ftp函数
  • axios怎么使用
  • vue错误提示
  • 领取养老金后每年会增加多少
  • js异步解决方案
  • async/await原理
  • php面向对象优点,缺点
  • 报销钱大写数字
  • vscode+cmake
  • 关于我的家乡作文1000字
  • vue前端怎么运行
  • 如何设置长期有效的群二维码安卓手机
  • 增值税专用发票丢了怎么补救
  • yolov5l
  • html扫码功能
  • yolo训练教程
  • yolo算法百度百科
  • 命令start
  • 劳务派遣开具发票
  • 破解版微擎框架如何升级
  • 电子承兑汇票到期提示付款后多久到账
  • 个体户按季申报吗
  • 固定资产盘盈、盘亏的账务处理?
  • 首涂24套
  • 税控设备抵减增值税必须当月抵减吗
  • 资产报废的原因及情况说明
  • access里面也暗含了sql
  • 好用的测试工具
  • 增值税税率调整后,合同价应该调整吗
  • 固定资产出售账面价值计入什么科目
  • 公司垫付员工社保分录
  • 房租费会计分录
  • 小规模纳税人开专票税率是多少?
  • 去年印花税今年年初交的税金及附加做今 年可以吗
  • 返还利润含税吗
  • 会计估计变动怎么处理
  • 新手公司内帐怎么做
  • 印花税怎么新增税源
  • win7系统怎么修复安装系统
  • 新买的读卡器不读卡,提示放入驱动盘
  • mac如何快速复制文件
  • windows7如何关闭夜间模式
  • centos6.8升级centos7
  • 如何在linux中安装软件
  • win7自动关闭显示器
  • win8资源管理器未响应
  • 在linux系统中,用来存放系统所需要的
  • opengl的坐标系
  • Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
  • cocos2dx运行原理
  • 简述linux与windows相比,有哪些优势
  • jquery简单例子
  • unity3d 脚本
  • jquery 使用
  • python安装包的命令
  • 现行增值税税率表2023
  • 税务局诉讼
  • 各种税务申报时间
  • 从印度往中国邮寄药品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设