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文件的更多相关文章

  1. java上传xls文件

    using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...

  2. Springboot/SpringMvc 读取上传 xls 文件内容

    /** * 读取上传 xls 内容返回 * @param file * @return */@RequestMapping(value = "/read.xls")@Respons ...

  3. vue上传大文件控件

    文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹.今天研究了一下这个问题,在 ...

  4. vue上传大文件的解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  5. django 解析上传xls文件

    1.解析上传数据 class DataUploadAPIView(APIView): # authentication_classes = (JSONWebTokenAuthentication, S ...

  6. input file 上传 判断文件类型、路径是否为空

    <html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...

  7. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  8. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  9. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  10. springboot整合vue实现上传下载文件

    https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...

随机推荐

  1. QT数据结构内存分配策略

    在QT的Reference中无意看到了QString及其他类型数据结构内存的分配策略,翻译并记录一下. 在QString的数据结构中,QString通过一次附加一个字符来动态构建字符串.假设我们向QS ...

  2. java 1.8 API帮助文档

    链接:https://pan.baidu.com/s/1MNZqIokMDWNZF-nXnoHzxA 提取码:zw13

  3. Qt非主线程显示窗口的简易思路

    首发于我的个人博客:xie-kang.com 博客内有更多文章,欢迎大家访问 原文地址 Qt 在非主线程是无法显示UI窗口的,如果我们在其它线程中处理完数据,需要使用窗口展示,或者在其它线程需要使用到 ...

  4. 日常笔记-VS

    VS快捷键 按键 作用 CTRL+R,CTRL+W 以点显示空格 CTRL+L 删除当前行 CTRL+D 重复当前行 CTRL+K,D 格式化代码 CTRL+M 展开代码

  5. 关于windows cmd 控制台输出中文

    由于中文在window 输出总是优乱码可能性  ,先建cmd.reg  负责下面内容  ,双击运行即可. Windows Registry Editor Version 5.00 [HKEY_CURR ...

  6. 关于python print函数format 格式化

    关于python print函数format 格式化  Your Guide to the Python print() Function https://realpython.com/python- ...

  7. 【ASP.NET Core】修改Blazor.Server的Hub地址后引发的问题

    Blazor Server,即运行在服务器上的 Blazor 应用程序,它的优点是应用程序在首次运行时,客户端不需要下载运行时.但它的代码是在服务器上执行的,然后通过 SignalR 通信来更新客户端 ...

  8. MySQL学习(一)大纲

    1.逻辑架构 参考博客:https://blog.csdn.net/fuzhongmin05/article/details/70904190 最上层为客户端层,并非mysql独有,诸如:连接处理.授 ...

  9. 如何基于 React Native 快速实现一个视频通话应用

    今天,我们将会一起开发一个包含 RTE (实时互动)场景的 Flutter 应用. 项目介绍 靠自研开发包含实时互动功能的应用非常繁琐,你要解决维护服务器.负载均衡等难题,同时还要保证稳定的低延迟. ...

  10. Leetcode Practice -- 字符串

    目录 14. 最长公共前缀 思路解析 151. 反转字符串中的单词 思路解析 125. 验证回文串 思路解析 415. 字符串相加 思路解析 3. 无重复字符的最长子串 思路解析 8. 字符串转换整数 ...