1.下载功能

// 下载需要ID 使用插槽传递ID
<el-button @click="downLoadEXCEL(scope.row.id)"></el-button>

// 下载功能downLoadEXCEL(id: number) {downloadMemberExcel(id).then(res => {if (res) { const blob = new Blob([res.data]);// 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性// IE10以上支持blob但是依然不支持downloadif ('download' in document.createElement('a')) {// 支持a标签download的浏览器const link = document.createElement('a')// 创建a标签link.download = '文件名.xlsx'// a标签添加属性link.style.display = 'none'link.href = URL.createObjectURL(blob)document.body.appendChild(link)link.click()// 执行下载URL.revokeObjectURL(link.href) // 释放urldocument.body.removeChild(link)// 释放标签} else {navigator.msSaveBlob(blob, '文件名.xlsx')}}})}

2.上传功能

            <el-uploadclass="upload"ref="upload"actionaccept=".xls,.xlsx":limit="1" //限制个数:auto-upload = "false":show-file-list="false":on-change="handleChange" //绑定的事件><el-button @click="uploadId(scope.row.id)">上传</el-button></el-upload>

 // 点击上传，将ID保存uploadIdBtn(id: number) {this.uploadId = id}// 点击上传excel文件private handleChange(file: any) {uploadExcel(file.raw, this.uploadId).then(({ data: res }:any) => {if (res.code === 0) {this.$message.success(res.msg)}})}

//  对应的接口
// 上传文件
export function uploadExcel(file: any, id: number) {const data = new FormData()data.append('file', file)return request({url: `/baseData/uploadExcel/${id}`,method: 'post',data: data,headers: {'content-type': 'multipart/form-data'}})
}// 下载
export function downloadMemberExcel(id: any) {return request({url: `/baseData/downloadDataProfile/${id}`,method: 'get',responseType: 'blob'})
}

================================

另一种上传excel的

// 导入上传
export function importProductExcel(file, uid) {const data = new FormData()data.append('file', file)data.append('uid', uid)return request({url: '/product/importProductExcel',method: 'POST',data: data,headers: { 'Content-Type': 'multipart/purchase-data; charset=utf-8' }})
}-----------vue
// 上传onChangeUpload(file) {console.log(this.$store.state.user.userId)importProductExcel(file.raw, this.$store.state.user.userId).then(res => {console.log(res)if (res.data.code !== 0) return this.$message.error(res.data.msg)this.$message.success(res.data.msg)})}

vue2+Ts+elementUI_后台管理系统_Excel文件的上传下载相关推荐

文件的上传下载功能的实现（包括进度条）[telerik控件]
文件的上传下载功能的实现(包括进度条) 1.准备工作首先我们需要Telerik控件,数据库,上传文件文件夹. Telerik控件: RadUpload.RadProgressManager.RadP ...
Java使用SFTP和FTP两种连接服务器的方式实现对文件的上传下载
一.Java实现对SFTP服务器的文件的上传下载: 1.添加maven依赖: <dependency><groupId>com.jcraft</groupId>&l ...
ssm框架验证码图片加载不出_基于SSM框架的文件图片上传/下载功能实现
前一段时间很多做毕业设计的同学问:如何写图片和文件的上传下载功能,今天正好有时间,所以就做了一个案例,详细的讲解这个功能. 框架结构: 对于很多做过开发的而言,上传功能肯定都用过,而且用到的场景很多, ...
ACTIVEX实现大文件FTP上传下载---上
ACTIVEX实现大文件FTP上传在Windows 操作系统下,有一个重要的机制,就是OLE ,就是可以让某个应用程序(OLE Controller)访问其它应用程序(OLE Server)所提供的 ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
使用JSP+Servlet实现文件的上传下载上传
<!DOCTYPE html > <html> <head> <meta charset="UTF-8"> <title> ...
云计算学习笔记004---hadoop的简介,以及安装,用命令实现对hdfs系统进行文件的上传下载
1.Hadoop简介 1.hadoop的诞生 l Nutch和Lucene之父Doug Cutting在2006年完成Hadoop项目. l Hadoop并不是一个单词,它来源于DougCutti ...
java 文件下载组件_java文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. *如何分片: *如何合成一个文件: *中断了从哪个分片开始. ...
通过okHttpUtils实现文件的上传下载
封装了okhttp的网络框架,支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用,可以自定义返回对象,支持Https和自签名证书,支持cookie的持久化和自 ...

vue2+Ts+elementUI_后台管理系统_Excel文件的上传下载

1.下载功能

2.上传功能

另一种上传excel的

vue2+Ts+elementUI_后台管理系统_Excel文件的上传下载相关推荐

最新文章

热门文章