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文 ...
随机推荐
- AT ARC092F Two Faced Edges
题意:给定一个有向图,保证无重边自环,求将图中的每条边反向后强联通分量的个数是否会改变. 数据范围:$n$ $≤$ $1e3$,$m$ $≤$ $2e5$. 首先考虑一条边的影响. 因为一条边只能连接 ...
- Vue3+Vite项目中 使用WindiCSS.
之前工作有了解过根据类名来写元素的样式,一听就发出疑问:这样写项目可读性恐怕不是很好吧... 之后来到杭州工作后,开始使用WindiCSS后发现 真香!!! 由于近期所写的项目都是自己一个人开发的 ...
- Visual Studio 2022 离线包手动下载和清理
下载离线vsvs_Professional.exe --layout e:\vs2022 --all --includeRecommended --includeOptional --lang zh- ...
- sql年、季度、月的第一天
SELECT dateadd(yy,datediff(yy,0,getdate()),0) select dateadd(qq,datediff(qq,0,getdate()),0) select d ...
- git—分支设置
什么是分支? 项目以上线,但需要开发新的功能.不能直接在项目上进行开发的,这时候就需要创建一个分支,去完成新功能的开发.测试等.完成之后合并到主分支上面.如果新功能的开发不用分支,导致的问题就会有很多 ...
- 替换yum源
1.yum源进行备份 进入到yum源的配置文件中 执行命令如下:cd /etc/yum.repos.d 将yum源进行备份:mv Centos-Base.repo Centos-Base.repo.b ...
- 用友CELL
Cell1.login('晋业软件','1101010373','1300-0616-0122-3005'); 下载地址: https://download.csdn.net/download/wil ...
- [C# 学习笔记]运用 GDI+ 的 Matrix 进行显示图形的平移和缩放
C# 学习中,想尝试着做一个工控方面的上位机,可以读取CAD绘制的图形,然后把它显示出来,后面让运动控制器去走CAD里面的轨迹. 一.用netDXF 开源包,对DXF文件进行解析.解析后的直线.圆.圆 ...
- Unity 2D Sprite 俯视角渲染顺序设置
今天结合网上的一个教程复习了一下Unity中2D俯视角游戏的渲染顺序设置. 首先是在Hierachy中的摆放顺序,靠下的物体渲染顺序靠后: 然后是Sprite Renderer组件,可以通过组件中的S ...
- 使用loadrunner运行中问题(无代码生成解决方法)
开始录制之后,不能成功录制,工具栏events一直是2,打开新网站不跳动,结束录制之后没有代码生成 进入软件,点击工具栏的录制,选择录制选项,将http高级如下设置 同时也要修改套接字,如下配置 当开 ...