一文解决Vue中实现 Excel下载到本地以及上传Excel
相信大家在项目中经常会遇到一些上传下载文件的相关功能,本文就Excel的相关功能进行简述:
咱直接看代码:
<div class="import-main-content">
<div class="import-main-button" @click="checkFile">
<div class="import-center" style="cursor: hand">
<div>+</div>
<div>上传Excel文件</div>
</div>
</div>
<div style="margin: 5px auto; width: 350px">
<div class="image-multiple-area" v-if="fileName">
<span>{{ fileName }}</span>
<img
@click="removes"
style="position: absolute; top: -1px; right: -1px"
src="@/assets/icons/tag-remove-icon.png"
class="remove-excel"
alt=""
/>
</div>
<div v-else>尚未选择文件!</div>
<div class="import-notice">注意:</div>
<div class="import-notice">
1. 请按照Excel表格模板内字段格式进行上传
</div>
<div class="import-notice">2. 导入表格数量控制在10000条以内</div>
<div class="import-notice">
3. Excel表格模板点击下载:<span
style="color: #277cf0"
@click="downLoadModel"
>Excel表格模板</span
>
</div>
</div>
<input
type="file"
id="fileinput"
style="display: none"
@change="checkFileSure"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
/>
</div>
data () {
return {
fileName: "", //Excel文件
fileDir: "", //Excel文件路径
}
},
checkFile() {
document.querySelector("#fileinput").click();
},
checkFileSure() {
let fileObj = document.querySelector("#fileinput").files[0];
let file = document.querySelector("#fileinput");
if (fileObj) {
this.fileName = fileObj.name;
// 文件类型
let fileType = fileObj.type;
let fileSize = fileObj.size;
// 文件大小
if (
!(
fileType === "application/vnd.ms-excel" ||
fileType ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
)
) {
this.msgError("上传文件仅支持 Excel 格式!");
file.value = "";
return false;
} else if (fileSize / 1024 / 1024 > 50) {
this.msgError("文件大小超过50M!");
file.value = "";
return false;
}
this.importDone();
} else {
this.$message.error("请选择导入的excel文档!");
return false;
}
},
//下载Excel模版
downLoadModel() {
//getImportTempFile4Prize 为下载excel 模板接口
getImportTempFile4Prize().then((res) => {
window.location.href = `${this.$store.state.weShop.IMGHEAD}${res.URI}`;
});
},
importDone() {
if (this.fileName == null || this.fileName === "") {
this.$message.error("请选择导入的excel文档!");
return;
}
let fileObj = document.querySelector("#fileinput").files[0];
console.log(fileObj.name);
let file = document.querySelector("#fileinput");
console.log(file);
if (fileObj?.name) {
let formData = new FormData();
formData.append("file", fileObj);
formData.append("upload_type", "02");
let fileType = fileObj.type.split("/")[1];
// uploadExcel 为后台上传Excel 接口
uploadExcel(formData, fileType)
.then((res) => {
file.value = "";
this.fileDir = res.PATH;
this.form.PRIZE_NUM = res.NUM;
})
.catch(() => {
file.value = "";
})
.then((res) => {});
document.querySelector("#fileinput").value = "";
} else {
this.$message.error("请选择导入的excel文档!");
document.querySelector("#fileinput").value = "";
this.fileName = "";
return false;
}
},
以上逻辑在后台接口,前端主要做的是一些简要的操作,需要上传Excel的话需要先上传到服务器才行。作为一个CV工程师相信上面代码对你有益的话就赶紧拿去使用吧。
一文解决Vue中实现 Excel下载到本地以及上传Excel的更多相关文章
- ftp 根据特定正则匹配文件名 下载到本地 并且上传文件到ftp java *** 最爱那水货
/** * 建立FTP链接,FTP服务器地址.端口.登陆用户信息都在配置里配置即可. * @throws IOException */ public boolean connectFtp(String ...
- 解决vue中百度地图覆盖物引用本地图片问题
这次的主要目的是在百度地图中引用自定义的覆盖物,路径是再asset/images/文件夹下,直接引用出错.需要先导入再引用. 在<script></script>代码中增加如下 ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
- java的poi技术下载Excel模板上传Excel读取Excel中内容(SSM框架)
使用到的jar包 JSP: client.jsp <%@ page language="java" contentType="text/html; charset= ...
- layui上传Excel更新数据并下载
前言: 最近做项目遇到了一个需求,上传Excel获取数据更新Excel文档,并直接返回更新完的Excel到前端下载:其实需求并没有什么问题,关键是前端用到的是layui上传组件(layui.uploa ...
- 下载模板,上传EXCEL
说道SAP里对EXCEL操作的大概就是上传,下载,显示了... 下载:(文档是通过SMW0上传的)注:如果下载的时候需要填充EXCEL的值,...请参考另一篇文档,OLE CALL METHOD CL ...
- jmert中如何测试上传文件接口(测试上传excel文件)
第一次用jmeter这个工具测试上传接口,以前没做过这一块,导致走了很多弯路.特地把经验谢谢,怕自己以后忘记... 一,jmeter如何上传文件 jmeter 的 http requests post ...
- SpringBoot(十三)_springboot上传Excel并读取excel中的数据
今天工作中,发现同事在整理数据,通过excel上传到数据库.所以现在写了篇利用springboot读取excel中的数据的demo.至于数据的进一步处理,大家肯定有不同的应用场景,自行修改 pom文件 ...
- 上传excel数据到数据库中
上传excel表格数据到数据库 导入固定路径下的excel数据到数据库 <form id="disposeFlightDataForm" action="../up ...
随机推荐
- 建设Kubernetes生产环境的16条建议
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Kubernetes是用于构建高度可扩展系统的强大工具. ...
- 离谱的 CSS!从表盘刻度到艺术剪纸
某日,群里有这样一个问题,如何实现这样的表盘刻度: 这其实是个挺有意思的问题,方法也有很多. 单标签,使用 conic-gradient 实现表盘刻度 最简单便捷的方式,就是利用角向渐变的方式 con ...
- content应用
- 从防御者视角来看APT攻击
前言 APT防御的重要性毋庸讳言,为了帮助各位师傅在防御方面建立一个总体认识,本文会将APT防御方法分为三类,分别是:监控.检测和缓解技术,并分别进行梳理,介绍分析代表性技术.这一篇分析现有的监控技术 ...
- 实践GoF的23种设计模式:建造者模式
摘要:针对这种对象成员较多,创建对象逻辑较为繁琐的场景,非常适合使用建造者模式来进行优化. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式:建造者模式>,作者: 元闰子. 简 ...
- Python版本共存、语法、变量和数据类型
python多版本共存 主要是把两个版本的python解释器的所在路径都加入环境变量当中,之后重新命名python解释器文件名称就好 先拷贝一个启动程序,在进行改名就好 python.exe pyth ...
- SpringCloud微服务实战——搭建企业级开发框架(四十):使用Spring Security OAuth2实现单点登录(SSO)系统
一.单点登录SSO介绍 目前每家企业或者平台都存在不止一套系统,由于历史原因每套系统采购于不同厂商,所以系统间都是相互独立的,都有自己的用户鉴权认证体系,当用户进行登录系统时,不得不记住每套系统的 ...
- 一文看懂 ZooKeeper ,面试再也不用背八股(文末送PDF)
ZooKeeper知识点总结 一.ZooKeeper 的工作机制 二.ZooKeeper 中的 ZAB 协议 三.数据模型与监听器 四.ZooKeeper 的选举机制和流程 本文将以如下内容为主线讲解 ...
- 使用 gitbook 制作自己的 html 文档
使用 gitbook 制作自己的 html 文档 步骤如下 npm install gitbook-cli -g // 全局安装 gitbook-cli <span style="te ...
- Spring Ioc源码分析系列--Bean实例化过程(一)
Spring Ioc源码分析系列--Bean实例化过程(一) 前言 上一篇文章Spring Ioc源码分析系列--Ioc容器注册BeanPostProcessor后置处理器以及事件消息处理已经完成了对 ...