Vue上传XLS文件
data() {
return {
tableData:[]
}
},
//原生JS+XLSX包实现 xls文件上传
methods: {
//上传excel表格文件
uploadHandler(data){//对应的是 upload中的 => :http-request="uploadHandler"
uploadHandler(data) {
const file = data.file; //上传的excel文件
// 1 读取到的文件
const reader = new FileReader(); // 创建一个文件读取的实例
reader.readAsArrayBuffer(file)
reader.onload = async (e) => {
// 当onlaod事件的时候,文件读取完成
console.log(e.target.result)
// 2 使用插件转成json格式
const filedata = e.target.result; // excel文件数据
// 3 利用XLSX对数据进行解析
const fileBook = await XLSX.read(filedata, { type: Array })
// 4 获取第一张表的表名
const sheetName = fileBook.SheetNames[0];
// 5 根据第一张表的表名获取这个表里面的内容
const sheetData = fileBook.Sheets[sheetName]
// 6 解析数据体
const json = XLSX.utils.sheet_to_json(sheetData)
console.log(json)
// 7 显示在表格中
this.tableData = json;
}
}
},
Vue上传XLS文件的更多相关文章
- java上传xls文件
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...
- Springboot/SpringMvc 读取上传 xls 文件内容
/** * 读取上传 xls 内容返回 * @param file * @return */@RequestMapping(value = "/read.xls")@Respons ...
- vue上传大文件控件
文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹.今天研究了一下这个问题,在 ...
- vue上传大文件的解决方案
众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...
- django 解析上传xls文件
1.解析上传数据 class DataUploadAPIView(APIView): # authentication_classes = (JSONWebTokenAuthentication, S ...
- input file 上传 判断文件类型、路径是否为空
<html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- springboot整合vue实现上传下载文件
https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...
随机推荐
- git push错误failed to push some refs to的解决
问题说明 当我们在github版本库中发现一个问题后,你在github上对它进行了在线的修改:或者你直接在github上的某个库中添加readme文件或者其他什么文件,但是没有对本地库进行同步.这个时 ...
- linux关于文件的创建方式
1:文件的创建方式: mkdir 用于创建目录: 语法: mkdir -p 目录名 举例:创建一个在run目录下的一个demo目录: 可以写成: mkdir /run/demo 亦可以写成 mk ...
- JSP中动态include和静态include的区别
a.静态include:语法:<%@ include file="文件名" %>,相当于复制,编辑时将对应的文件包含进来,当内容变化时,不会再一次对其编译,不易维护. ...
- 反射(Reflect)
反射摘要: 反射是java中非常强大的工具,利用反射可以书写框架,而框架就是半完成的代码.反射就是对类中的各个部分进行封装为其它对象,并且可以随时提取出Class或Object成员的属性,例如成员变量 ...
- 转:MyBatis 日志打印
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012666996/article/details/79106599Mybatis SQL语句控制台 ...
- Field userService in com.lin.hms.controller.LogController required a bean of type 'org.lin.hms.service.UserService' that could not be found.
需要一个bean但找不到 解决 我们在controller使用的service没有注入spring容器,那么我们可以在启动类上,加上包扫描注解,让这个bean所在的包能扫描到: @ComponentS ...
- 如果摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
问: 我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,猿大师播放器还可以在网页中播放RTSP流 ...
- Notepad++行转列
行转列\r\n
- 使用shell 方式对 vcenter 进行补丁升级
使用shell 方式对 vcenter 进行补丁升级 背景:最近VMware官网发布了最新的VMware vCenter Server 7.0 iso补丁文件,为了安全起故此对vCenter 进行安全 ...
- Spring--注解开发+依赖注入
自动装配 数据层: 业务层: 自动装配: 结果: 若是将自动装配的注解放在set函数处: 结果: 结果相同,若是将set方法去掉的话: 结果: 这样的话,set方法也得到解放了耶! 以上都是按照类型装 ...