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文 ...
随机推荐
- Java中StringBuilder相关知识点
StringBuilder 1.StringBuilder概述 如果对字符串进行拼接操作,每次拼接都会构建一个新的String对象,既耗时又浪费空间,而且这种操作还不可避免.我们可以通过StringB ...
- php 后台注册环信用户
<?php //Easemob.php <?php /** -------------------------------------------------- 环信PHP REST示例代 ...
- JavaScript的Object.defineProperty( )方法
Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象. 基础的语法格式如下: 1 var data = {}//定义一个对象 2 Ob ...
- django_模板层的过滤器和继承
**************************************************************************************************** ...
- (四).JavaScript的循环结构
2.2 循环嵌套 ①.语法 // 嵌套循环:循环内部包裹其他的循环 // 外侧循环执行一次,内部循环执行一轮 // 实例 for (var i = 0; i < 5; i++) { for (v ...
- C/C++ 数据结构链式队列的定义与实现
#include <iostream> #include <Windows.h> using namespace std; typedef struct _QNode{ int ...
- 基于工业4g网关的危化品运输车监控方案
工业的发展立足于各种各样原材料的加工和应用,而其中就包括一些油料.化学品和易燃易爆货物,针对此类货物的运输,需要着重关注其安全性和稳定性,否则就容易造成严重的人身和财产损失.得益于物联网技术的发展,现 ...
- 微信公众号授权登录,整合spring security
公司的业务需求,对接了微信公众号授权,通过微信公众号的接口拿到用户信息进行业务系统的登录,话不多说上代码,我的实现方式是整合了spingSecurity 首先是接口 @PostMapping(&quo ...
- LeetCode86 分隔链表
idea: 烦死了,这个题一直因为创立的指针为空,或者接入结点方法不对,结果将两个小链表搞混乱了,不过具体思路ok.将小值结点成一组,大值结点成一组,最后在首尾相连,实现起来也比较简单 /** * ...
- TP5.0--5.1获取当前域名的方法
TP5.0获取当前域名的方法 use think\Request; $request = Request::instance(); $domain = $request->domain(); 获 ...