vue上传Excel文件并直接点击文件列表进行预览

本文主要内容：用elementui的Upload 组件上传Excel文件，上传后的列表采用xlsx插件实现点击预览表格内容效果。

在项目中可能会有这样的需求，有很多种方法实现。但是不想要跳转外部地址，所以用了xlsx插件来解析表格，并展示表格内容。

1.安装或CDN引用xlsx插件

xlsx插件，通常指的是SheetJS/js-xlsx，是一个功能强大的JavaScript库，它允许开发者在浏览器或Node.js环境中读取、创建、编辑和导出Excel文件（包括.xls、.xlsx、.csv、.ods等多种格式）。这个库是由纯JavaScript编写的，不依赖于任何外部库，非常适合在前端应用中处理Excel数据，也适用于服务器端处理。

对于Vue开发者来说，vue-xlsx是一个专门为Vue框架设计的轻量级封装库，提供了Vue组件和更加Vue友好的API，它使得在Vue应用中处理Excel文件变得更加简单和直接。在这里我使用的是xlsx。

（1）在项目中安装xlsx

npm install vue-xlsx  //安装的是vue-xlsx库，基于SheetJS/js-xlsx的Vue封装库，专门为Vue框架设计
yarn add vue-xlsx
npm install xlsx  //安装的是SheetJS/js-xlsx库，纯JavaScript编写的库
yarn add xlsx

（2）CDN引入xlsx

直接添加script标签引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

动态添加script标签引入

mounted() {// 引入xlsx插件const script = document.createElement("script");script.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";//使用.full.min.js引入成功，其他不行script.onload = () =>{console.log("xlsx脚本加载完成");}document.body.appendChild(script);this.assignmentQueryForm()
},

这里的资源是从免费的开源CDN服务网站上copy下来的，cdnjs网站地址：https://cdnjs.com/libraries/xlsx（需要不同版本的请前往）或开发文档概述 | SheetJS 中文网 (nodejs.cn)

（3）CDN引入xlsx没有起作用的解决方法

我这里引入了xlsx的CDN链接，但是运用xlsx还是报错。经过解决，发现使用xlsx.full.min.js这个后缀的文件可以，也不知道为什么。SheetJS开发文档说xlsx.full.min.js是完整的独立脚本。

2.导入xlsx

(1)安装的需要在Vue组件中导入vue-xlsx

import { XlSX } from 'vue-xlsx';
import { XlSX } from 'xlsx';

（2）CDN引入的xlsx直接使用

3.利用vue组件上传Excel文件

ref: 为上传组件设置了一个引用名。

action: 上传地址的URL，但这里设置为#，表明实际的上传逻辑将不会通过action属性指定的URL进行，而是通过:http-request属性自定义。

:on-preview: 点击已上传的文件链接时的回调。

:on-remove: 文件列表移除文件时的回调。

:file-list: 已经上传的文件列表，绑定到fileList数据属性。

:auto-upload: 是否在选取文件后立即进行上传，这里设置为false，表示需要手动触发上传。

:http-request: 覆盖默认的上传行为，可以自定义上传的实现。

:on-change: 文件状态改变时的回调。

multiple: 是否支持多文件上传。

因为只做了Excel文件解析，所以可以在upload组件中设置accept属性，限制只上传表格文件。

 accept=".xls, .xlsx"

代码如下：

<el-dialog title="批量导入" :visible.sync="dialogVisible1" width="30%"><el-form :model="importForm1" ref="removeControl" :rules="rules" label-position="right" label-width="auto"style="width: 50%"><el-form-item label="附件:" ref="myfile" style="background-color: #ffffff;"><div style="display: flex"><el-upload ref="upload" action="#" :on-preview="handleView" :on-remove="handleRemove" :file-list="fileList":auto-upload="false" :http-request="uploadFile" :on-change="onChange" multiple><el-button slot="trigger" size="small" type="primary" icon="el-icon-upload2"style="padding: 10px 20px">上传文件</el-button></el-upload></div></el-form-item><span @click="down()" style="cursor: pointer; color: blue">下载模板</span></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible1 = false">取 消</el-button><el-button type="primary" @click="goUpload()">确 定</el-button></span>
</el-dialog>

4.解析并预览Excel文件

（1）文件上传成功后，点击解析文件

这里会用到upload组件的on-preview(点击已上传的文件链接时的回调)。

（2）解析Excel文件步骤

  • 使用new FileReader()创建一个文件存储，用于异步读取用户的文件内容。

  • 当文件读取操作成功完成时，触发onload事件。通过e.target.result获取到文件的内容。

  • 使用XLSX.read(data, { type: 'array' })将array格式的数据解析为Excel工作簿对象。

  • 通过tablelook.SheetNames[0]获取第一个工作表的名称，并通过tablelook.Sheets[firstSheetName]获取该工作表的数据。

  • 使用XLSX.utils.sheet_to_json(tablesheet, { header: 1 })将工作表的数据转换为JSON格式，其中{ header: 1 }表示第一行作为表头。

  • 使用FileReader接口的 readAsArrayBuffer() 方法用于开始读取指定Blob或File的内容。

（3）处理JSON数据(可根据自己需求)

  • 使用jsonData.shift()移除并保存表头（即第一行数据）
  • 通过filter方法过滤掉包含空值（null、undefined、空字符串''）的行
  • 使用map方法将数据中的每一行数据转换为一个对象，对象的键是表头，值是对应的数据。

我这里处理成了elementui的table格式数据，点击文件列表就可以直接展示表格解析的内容。

代码如下：

handleView(file) {const reader = new FileReader();reader.onload = (e) => {const data = e.target.result;const tablelook = XLSX.read(data, { type: 'array' });const firstSheetName = tablelook.SheetNames[0];const tablesheet = tablelook.Sheets[firstSheetName];const jsonData = XLSX.utils.sheet_to_json(tablesheet, { header: 1 });this.whiteListHeaders = jsonData.shift();// 过滤空数据  this.whiteListTable = jsonData.filter(row => {   return row.some(item => item !== null && item !== undefined && item !== '');  });  // 表格数据处理this.tableData2 = this.whiteListTable.map(row => {  const obj = {};  this.whiteListHeaders.forEach((header, cellIndex) => {  obj[header] = row[cellIndex];  });  return obj;  });  console.log("表格头", this.whiteListHeaders);  console.log("表格数据", this.whiteListTable);  console.log("this.tableData2", this.tableData2); }reader.onerror = (error) => {  console.error('读取文件错误:', error);  };reader.readAsArrayBuffer(file.raw)this.dialogVisible2 = true;
},

预览文件表格展示

<el-dialog :visible.sync="dialogVisible2" title=" " width="50%"><el-table :data="tableData2" style="width: 100%" :cell-style="{ 'text-align': 'center' }":header-cell-style="{background: '#E5F2FF',color: '#000','text-align': 'center',}">  <el-table-column  v-for="header in whiteListHeaders"  :key="header"  :prop="header"  :label="header"  width="140">  </el-table-column>  </el-table>  
</el-dialog>

注意：对于大型的Excel文件或需要进行复杂数据处理的场景，可能需要使用后端API来接收上传的Excel文件，在后端解析文件数据后返回给前端在展示，这样有利于提高性能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/50044.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker安装kkFileView实现在线文件预览

Docker安装kkFileView实现在线文件预览

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 官方文档地址：https://kkview.cn/zh-cn/docs/production.html 一、拉取镜像 do…
阅读更多...
1 深度学习网络DNN

1 深度学习网络DNN

代码来自B站up爆肝杰哥 测试版本 import torch import torchvisiondef print_hi(name):print(fHi, {name}) if __name__ __main__:print_hi(陀思妥耶夫斯基)print("HELLO pytorch {}".format(torch.__version__))print("torchvision.version:", torchvi…
阅读更多...
用在ROS2系统中保持差速轮方向不变的PID程序

用在ROS2系统中保持差速轮方向不变的PID程序

在ROS 2中&#xff0c;为了保持差速轮机器人的方向不变&#xff0c;通常需要使用PID&#xff08;Proportional Integral Derivative&#xff09;控制器来控制机器人的角速度。PID控制器可以帮助调整机器人的角速度&#xff0c;以维持其朝向不变。 下面是一个简单的ROS 2节点示…
阅读更多...
使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号

使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号

首先看一下业务需求 需要实现跨页多选&#xff0c;双击行的时候弹出编辑对话框&#xff0c;对每行可以进行编辑和删除&#xff0c;实现分页器。 如果还没在项目中配置element-plus的可以参考文章 从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router…
阅读更多...
vue import from

vue import from

vue import from 导入文件&#xff0c;从XXXX路径&#xff1b;引入文件 import xxxx from “./minins/resize” import xxxx from “./minins/resize.js” vue.config.js 定义 : resolve(src)&#xff1b;就是指src 目录 import xxxx from “/utils/auth” im…
阅读更多...
【C++初阶】string类

【C++初阶】string类

【C初阶】string类 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C&#x1f96d; &#x1f33c;文章目录&#x1f33c; 1. 为什么学习string类&#xff1f; 1.1 C语言中的字符串 1.2 实际中 2. 标准库中的string类 2.1 string类 2.…
阅读更多...
Web响应式设计———1、Grid布局

Web响应式设计———1、Grid布局

1、网格布局 Grid布局 流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样&#xff0c;页面上的元素可以根据屏幕宽度自动调整大小&#xff0c;适应不同设备和分辨率。 <!DOCTYPE html> <html lang"en"> &l…
阅读更多...
Mysql-索引视图

Mysql-索引视图

目录 1.视图 1.1什么是视图 1.2为什么需要视图 1.3视图的作用和优点 1.4创建视图 1.5更新视图 1.6视图使用规则 1.7修改视图 1.8删除视图 2.索引 2.1什么是索引 2.2索引特点 2.3索引分类 2.4索引优缺点 2.5创建索引 2.6查看索引 2.7删除索引 1.视图 1.1什么是…
阅读更多...
go中map

go中map

文章目录 Map简介哈希表与Map的概念Go语言内建的Map类型Map的声明Map的初始化Map的访问Map的添加和修改Map的删除Map的遍历 Map的基本使用Map的声明与初始化Map的访问与操作Map的删除Map的遍历Map的并发问题实现线程安全的Map 3. Map的访问与操作3.1 访问Map元素代码示例&#…
阅读更多...
释疑 803-（1）概述 精炼提纯版

释疑 803-（1）概述 精炼提纯版

目录 习题 1-01计算机网络可以向用户提供哪些服务? 1-02 试简述分组交换的要点。 1-03 试从多个方面比较电路交换、报文交换和分组交换的主要优缺点。 1-05 互联网基础结构的发展大致分为哪几个阶段?请指出这几个阶段最主要的特点。 1-06 简述互联网标准制定的几个阶段…
阅读更多...
web网站组成

web网站组成

web网站由四部分组成&#xff1a;浏览器 前端服务器 后端服务器 数据库服务器 流程&#xff1a; 1.浏览器输入网站后&#xff0c;向前端服务器发送请求&#xff0c;前端服务器响应&#xff0c;静态的数据给浏览器。 2.前端代码中script中有url,这个是向后台发送请求的网…
阅读更多...
手撕数据结构---------顺序表和链表

手撕数据结构---------顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构&#xff0c;常⻅的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是线性结构&#xff0c;也就说是连续的⼀条直…
阅读更多...
Python研究生毕业设计，数据挖掘、情感分析、机器学习

Python研究生毕业设计，数据挖掘、情感分析、机器学习

最近在学校毕业了&#xff0c;其中有很多毕业论文使用到的代码&#xff0c;如数据挖掘、情感分析、机器学习、数据预测处理、划分数据集和测试集&#xff0c;绘制分类任务&#xff0c;词汇表示&#xff1a;使用TF-IDF向量化器&#xff0c;线性回归、多元线性回归、SVR回归模型&…
阅读更多...
ecshop网站部署

ecshop网站部署

目录 步骤1 ecshop网站的部署 一、安装环境 二、设置开机启动 ​三、 测试php ​四、上传安装包 五、安装ecshop 步骤1 ecshop网站的部署 一、安装环境 yum install -y httpd mariadb-server php php-devel php-mysql 浏览器访问&#xff1a;192.168.30.2 二、设置开机启…
阅读更多...
LeetCode 415.字符串相加 C++写法

LeetCode 415.字符串相加 C++写法

LeetCode 415.字符串相加 C写法 思路&#x1f914;&#xff1a; 首先不能用stoi和tostring来做&#xff0c;如果给一个很大的数那一定存不下。我们可以从后往前一位一位的取&#xff0c;创建一个变量存储进位用于计算下一位数&#xff0c;之后取模得到当前数字&#xff0c;每一…
阅读更多...
k8s部署rabbitmq集群

k8s部署rabbitmq集群

1 部署集群 1.1 安装 # 创建一个中间件的命名空间 kubectl create namespace middleware # 创建ConfigMap,包含RabbitMQ的配置文件内容 kubectl apply -f rabbitmq-configmap.yaml # 配置用于存储RabbitMQ数据的PersistentVolume&#xff08;PV&#xff09;和PersistentVolum…
阅读更多...
iPhone 17系列取消17 Plus版本？新一代苹果手机迎来新变革

iPhone 17系列取消17 Plus版本？新一代苹果手机迎来新变革

随着科技的飞速发展&#xff0c;苹果公司再次准备刷新我们的期待&#xff0c;即将推出的iPhone 17系列携带着一系列令人兴奋的升级。今年&#xff0c;苹果打破了常规&#xff0c;将四款新机型带入市场——iPhone 17、17 Pro、17 Pro Max&#xff0c;以及一款全新的成员&#xf…
阅读更多...
Java开发之反射与动态代理

Java开发之反射与动态代理

#来自ゾフィー&#xff08;佐菲&#xff09; 1 反射&#xff08;Reflect&#xff09; 运行期间&#xff0c;获取类的信息&#xff0c;进行一些操作。 运行时构造类的对象。运行时获取类的成员变量和方法。运行时调用对象的方法&#xff08;属性&#xff09;。 2 Class 类 Cla…
阅读更多...
IntelliJ IDEA 2024.1.4最新实用教程！！爽到飞起！！

IntelliJ IDEA 2024.1.4最新实用教程！！爽到飞起！！

IntelliJ IDEA 2024.1.4最新破解教程&#xff01;&#xff01;直接2099&#xff01;&#xff01;爽到飞起&#xff01;&#xff01;【资源在末尾】安装馆长为各位看官准备了多个版本&#xff0c;看官可根据自己的需求进行下载和选择安装。https://mp.weixin.qq.com/s/oBgoHdFU4…
阅读更多...
视图，存储过程和触发器

视图，存储过程和触发器

目录 视图 创建视图&#xff1a; 视图的使用 查看库中所有的视图 删除视图 视图的作用&#xff1a; 存储过程&#xff1a; 为什么使用存储过程&#xff1f; 什么是存储过程&#xff1f; 存储过程的创建 创建一个最简单的存储过程 使用存储过程 删除存储过程 带参的存储…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023